

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/dzx-blog/img/fluid.png">
  <link rel="icon" href="/dzx-blog/img/fluid.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="John Doe">
  <meta name="keywords" content="">
  
    <meta name="description" content="HTMLHTML入门01.HTML结构组成与具体作用12345678910111213141516171819202122232425262728293031323334353637383940414243444546&lt;!DOcTyPE html&gt;&lt;!--    DOCTYPE（document type）： 文档类型    1.版本声明。    2.给浏览器声明，告诉浏览器应该">
<meta property="og:type" content="article">
<meta property="og:title" content="前端基础三大件的学习">
<meta property="og:url" content="https://deng-zixiong.gitee.io/dzx-blog/2021/09/07/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80%E4%B8%89%E5%A4%A7%E4%BB%B6/index.html">
<meta property="og:site_name" content="猛男邓子雄的博客">
<meta property="og:description" content="HTMLHTML入门01.HTML结构组成与具体作用12345678910111213141516171819202122232425262728293031323334353637383940414243444546&lt;!DOcTyPE html&gt;&lt;!--    DOCTYPE（document type）： 文档类型    1.版本声明。    2.给浏览器声明，告诉浏览器应该">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-09-06T16:00:00.000Z">
<meta property="article:modified_time" content="2023-02-23T13:16:07.880Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary_large_image">
  
  
  
  <title>前端基础三大件的学习 - 猛男邓子雄的博客</title>

  <link  rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.6.1/css/bootstrap.min.css" />



  <link  rel="stylesheet" href="https://lib.baomitu.com/github-markdown-css/4.0.0/github-markdown.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/hint.css/2.7.0/hint.min.css" />

  <link  rel="stylesheet" href="https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->
<!-- Do not modify the link that theme dependent icons -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_hj8rtnfg7um.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/dzx-blog/css/main.css" />


  <link id="highlight-css" rel="stylesheet" href="/dzx-blog/css/highlight.css" />
  
    <link id="highlight-css-dark" rel="stylesheet" href="/dzx-blog/css/highlight-dark.css" />
  




  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    Fluid.ctx = Object.assign({}, Fluid.ctx)
    var CONFIG = {"hostname":"deng-zixiong.gitee.io","root":"/dzx-blog/","version":"1.9.4","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false,"scope":[]},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"left","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"code_language":{"enable":true,"default":"TEXT"},"copy_btn":true,"image_caption":{"enable":true},"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"placement":"right","headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"follow_dnt":true,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/dzx-blog/local-search.xml"};

    if (CONFIG.web_analytics.follow_dnt) {
      var dntVal = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack;
      Fluid.ctx.dnt = dntVal && (dntVal.startsWith('1') || dntVal.startsWith('yes') || dntVal.startsWith('on'));
    }
  </script>
  <script  src="/dzx-blog/js/utils.js" ></script>
  <script  src="/dzx-blog/js/color-schema.js" ></script>
  


  
<meta name="generator" content="Hexo 6.3.0"></head>


<body>
  

  <header>
    

<div class="header-inner" style="height: 70vh;">
  <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/dzx-blog/">
      <strong>邓子雄的博客</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/dzx-blog/">
                <i class="iconfont icon-home-fill"></i>
                <span>首页</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/dzx-blog/archives/">
                <i class="iconfont icon-archive-fill"></i>
                <span>归档</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/dzx-blog/categories/">
                <i class="iconfont icon-category-fill"></i>
                <span>分类</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/dzx-blog/tags/">
                <i class="iconfont icon-tags-fill"></i>
                <span>标签</span>
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/dzx-blog/about/">
                <i class="iconfont icon-user-fill"></i>
                <span>关于</span>
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              <i class="iconfont icon-search"></i>
            </a>
          </li>
          
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">
              <i class="iconfont icon-dark" id="color-toggle-icon"></i>
            </a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

  

<div id="banner" class="banner" parallax=true
     style="background: url('/dzx-blog/img/default.png') no-repeat center center; background-size: cover;">
  <div class="full-bg-img">
    <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
      <div class="banner-text text-center fade-in-up">
        <div class="h2">
          
            <span id="subtitle" data-typed-text="前端基础三大件的学习"></span>
          
        </div>

        
          
  <div class="mt-3">
    
    
      <span class="post-meta">
        <i class="iconfont icon-date-fill" aria-hidden="true"></i>
        <time datetime="2021-09-07 00:00" pubdate>
          2021年9月7日 凌晨
        </time>
      </span>
    
  </div>

  <div class="mt-1">
    
      <span class="post-meta mr-2">
        <i class="iconfont icon-chart"></i>
        
          117k 字
        
      </span>
    

    
      <span class="post-meta mr-2">
        <i class="iconfont icon-clock-fill"></i>
        
        
        
          975 分钟
        
      </span>
    

    
    
  </div>


        
      </div>

      
    </div>
  </div>
</div>

</div>

  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="side-col d-none d-lg-block col-lg-2">
      

    </div>

    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">前端基础三大件的学习</h1>
            
            
              <div class="markdown-body">
                
                <h1 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h1><h2 id="HTML入门"><a href="#HTML入门" class="headerlink" title="HTML入门"></a>HTML入门</h2><h3 id="01-HTML结构组成与具体作用"><a href="#01-HTML结构组成与具体作用" class="headerlink" title="01.HTML结构组成与具体作用"></a>01.HTML结构组成与具体作用</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;!<span class="hljs-title class_">DOcTyPE</span> html&gt;<br>&lt;!--<br>    <span class="hljs-variable constant_">DOCTYPE</span>（<span class="hljs-variable language_">document</span> type）： 文档类型<br>    <span class="hljs-number">1.</span>版本声明。<br>    <span class="hljs-number">2.</span>给浏览器声明，告诉浏览器应该按照html5的规范来解析当前的文档。<br>    <span class="hljs-number">3.</span>如果不书写，那么按照什么规范解析，就看浏览器心情<br>    <span class="hljs-number">4.</span>必须定义在 <span class="hljs-variable constant_">HTML</span> 文档的第一行，在 <span class="hljs-variable constant_">HTML</span> 标签之前<br>    <span class="hljs-number">5.</span>&lt;!<span class="hljs-variable constant_">DOCTYPE</span> html&gt; 不是html标签，他只是一条浏览器的指令，在所有版本中，这条指令对大小写都不敏感<br>--&gt;<br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span></span><br><span class="language-xml"><span class="hljs-comment">&lt;!--</span></span><br><span class="hljs-comment"><span class="language-xml">    1.HTML 标记标签通常被称为 HTML 标签 (HTML tag)</span></span><br><span class="hljs-comment"><span class="language-xml">    2.这个标签告诉浏览器这个是HTML 文档的开始，最后一个标签是&lt;/html&gt;</span></span>，这个标签告诉浏览器这个是终止。<br>    <span class="hljs-number">3.</span>html标签是网页结构的最外层 里边包含两个标签  body 和 head <br>    <span class="hljs-number">4.</span>lang是语言  en是英语  告诉浏览器本网页是英文网页  ch是中文<br>    <span class="hljs-number">5.</span>lang是html的属性   en是lang属性的值<br>--&gt;<br>&lt;head&gt;<br>    &lt;!--<br>        1.head代表网页的头部，不会显示网页中<br>        2.只要包含网页的元信息，标题，引入外部文件等等<br>    --&gt;<br>    &lt;meta charset=&quot;UTF-8&quot;&gt;<br>    &lt;!--<br>        meta标签是控制网页的元信息<br>        元信息就是信息的信息（关于当前网页的信息）<br>        charset代表字符编码，utf-8是万国码<br>        补充：<br>            gb2312 简单中文  包括6763个汉字<br>            BIG5   繁体中文 港澳台等用<br>            GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312<br><br>        UTF-8则包含全世界所有国家需要用到的字符，以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了<br>    --&gt;<br>    &lt;meta name=“keywords” content=“”&gt;<br>    &lt;!--设置网页关键字，为搜索引擎提供的关键字列表，各关键词间用英文逗号“,”隔开--&gt;<br>    &lt;meta name=“description” content=“”&gt;<br>    &lt;!--设置网页描述,用来告诉搜索引擎你的网站主要内容--&gt;<br>    &lt;title&gt;html的编码结构&lt;/title&gt;<br>    &lt;!--title是网页的标题,显示在浏览器标签页的标题中--&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br>    &lt;!--在html中，所有我们能够看到的内容全部书写在body中--&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;<br><br></code></pre></td></tr></table></figure>



<h3 id="02-HTML标签之间的关系"><a href="#02-HTML标签之间的关系" class="headerlink" title="02.HTML标签之间的关系"></a>02.HTML标签之间的关系</h3><p>1.嵌套关系</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;!--<br>    div元素是p元素的父元素<br>    p元素是div元素的子元素<br>    div元素是span元素的祖宗元素<br>    span是div的后代与元素<br>--&gt;<br>    <br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span> </span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>&lt;/span &gt;</span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>  </span><br><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml"></span><br></code></pre></td></tr></table></figure>

<p>2.并列关系(兄弟关系)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;!--<br>    head是body的上一个兄弟元素<br>    body是head的下一个兄弟元素<br>--&gt;<br>    <br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span></span><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></span><br><br></code></pre></td></tr></table></figure>



<h2 id="HTML元素"><a href="#HTML元素" class="headerlink" title="HTML元素"></a>HTML元素</h2><h3 id="HTML块元素"><a href="#HTML块元素" class="headerlink" title="HTML块元素"></a>HTML块元素</h3><p>常用的块元素有: div, h1~h6, p标签, 有序列表ol, 无序列表ul, hr …..</p>
<p>块元素标签的特性:</p>
<ul>
<li>独占一行,换行显示</li>
<li>可以设置宽高</li>
<li>可以容纳行内元素和其他块元素(p标签、h标签都只能嵌套行元素或行内块元素)</li>
</ul>
<h3 id="HTML行元素"><a href="#HTML行元素" class="headerlink" title="HTML行元素"></a>HTML行元素</h3><p>常见的行元素有: span, b, i, u, em, strong, var, a标签, img ….</p>
<p>行内元素的特性:</p>
<ul>
<li>在一行中如有剩余空间，允许同其他 行内&#x2F;行内块 标签公用一行（行内显示）</li>
<li>不可以直接设置宽高（宽高无效）,默认的宽高由内容决定</li>
<li>行标签只能嵌套行标签</li>
</ul>
<h3 id="表格元素"><a href="#表格元素" class="headerlink" title="表格元素"></a>表格元素</h3><h4 id="table表格的组成"><a href="#table表格的组成" class="headerlink" title="table表格的组成"></a>table表格的组成</h4><ul>
<li>一个可选的 <code>&lt;caption&gt;</code> 元素</li>
<li>一个可选的 <code>&lt;thead&gt;</code> 元素</li>
<li>下列任意一个:<ol>
<li>零个或多个<code> &lt;tbody&gt;</code></li>
<li>零个或多个<code> &lt;tbody&gt;</code></li>
<li>零个或多个 <code>&lt;th&gt;</code></li>
<li>零个或多个 <code>&lt;td&gt;</code></li>
<li>一个可选的 <code>&lt;tfoot&gt;</code> 元素</li>
</ol>
</li>
</ul>
<h4 id="table表格的基础使用"><a href="#table表格的基础使用" class="headerlink" title="table表格的基础使用"></a>table表格的基础使用</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>table<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">table</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">caption</span>&gt;</span>121班级表<span class="hljs-tag">&lt;/<span class="hljs-name">caption</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>姓名<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>学号<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>备注<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>黄瓜<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>12<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>好色<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>甘*鹏<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>13<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>好色<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>华<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>14<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>好色<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>街癫子<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>15<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>胆小好色<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>



<h4 id="合并单元格"><a href="#合并单元格" class="headerlink" title="合并单元格"></a>合并单元格</h4><ul>
<li>colspan: 设置跨列，谁合并，给谁设置</li>
<li>rowspan：设置跨行,谁合并，给谁设置</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>table<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">table</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;400&quot;</span> <span class="hljs-attr">border</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;border-collapse:collapse;&quot;</span> <span class="hljs-attr">cellpadding</span>=<span class="hljs-string">&quot;10&quot;</span> <span class="hljs-attr">cellspacing</span>=<span class="hljs-string">&quot;0&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">caption</span>&gt;</span>班级表<span class="hljs-tag">&lt;/<span class="hljs-name">caption</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">th</span> <span class="hljs-attr">colspan</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>学生年龄<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">th</span>&gt;</span>备注<span class="hljs-tag">&lt;/<span class="hljs-name">th</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>小王<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>12<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>老王<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span> <span class="hljs-attr">rowspan</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span>13<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>王中王<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">tr</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>大王<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span>15<span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">td</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">td</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">tr</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">table</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>



<h3 id="iframe元素"><a href="#iframe元素" class="headerlink" title="iframe元素"></a>iframe元素</h3><ul>
<li>HTML内联框架元素 (<code>&lt;iframe&gt;</code>)它能够将另一个HTML页面嵌入到当前页面中。</li>
<li>每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录(session history)和DOM树。包含嵌入内容的浏览上下文称为 <strong>父级浏览上下文</strong>。</li>
<li>页面上每个<code>&lt;iframe&gt;</code>都会需要包括内存在内的额外计算资源，这是因为每个浏览上下文都拥有完整的文档环境。虽然理论上来说你能够在代码中写出来无限多的<code>&lt;iframe&gt;</code>，但是你最好还是先看看这么做会不会导致某些性能问题。</li>
</ul>
<p><strong>使用:</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">UTF-8</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">tItle</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">tItle</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-comment">&lt;!--</span><br><span class="hljs-comment">        iframe标签：</span><br><span class="hljs-comment">            1、src是嵌入html的地址  可以是网络  也可以是本地服务器</span><br><span class="hljs-comment">            2、width和height属性来设置内联框架的宽高</span><br><span class="hljs-comment">     --&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>随便写点<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;http://www.bilibili.com&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;300&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./01.html&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;300&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>



<h2 id="SEO基础"><a href="#SEO基础" class="headerlink" title="SEO基础"></a>SEO基础</h2><h3 id="基本概念"><a href="#基本概念" class="headerlink" title="基本概念"></a>基本概念</h3><ol>
<li><strong>搜索引擎优化（SearchEngine Optimization，简称SEO）</strong>，指在了解搜索引擎自然搜索机制的基础之上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中关键字的自然排名，获得更多的展现量，吸引更多目标客户点击访问网站，从而达到互联网营销及品牌建设的目标</li>
<li><strong>SEO</strong>可以帮助将网站中的高质量内容更好的呈现给搜索引擎，SEO和搜索引擎，是良性的共生关系</li>
</ol>
<h3 id="HTML代码的SEO优化"><a href="#HTML代码的SEO优化" class="headerlink" title="HTML代码的SEO优化"></a>HTML代码的SEO优化</h3><ol>
<li>标签语义化：根据标签的语义合理使用</li>
<li>图片alt一定要合理书写</li>
<li>a标签内部的文本（锚文本）对关键词排名影响非常大</li>
<li>合理利用搜索引擎重视的标签(title，strong，h1-h3，a，em，img&amp;alt）</li>
</ol>
<h1 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h1><h2 id="CSS的基本概念"><a href="#CSS的基本概念" class="headerlink" title="CSS的基本概念"></a>CSS的基本概念</h2><ul>
<li>层叠样式表或级联样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。</li>
<li>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</li>
<li>CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页样式编辑的能力。</li>
<li>将页面的内容与表现形式相分离。</li>
<li>层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。CSS 之所以有“层叠”的概念，是因为有多个样式来源</li>
</ul>
<h2 id="浏览器渲染流程"><a href="#浏览器渲染流程" class="headerlink" title="浏览器渲染流程"></a>浏览器渲染流程</h2><ol>
<li>浏览器开始解析目标HTML文件，执行流的顺序为自上而下。</li>
<li>HTML解析器将HTML结构转换为基础的DOM(文档对象模型)，构建DOM树完成后，触发DomContendLoaded事件。</li>
<li>CSS解析器将CSS解析为CSSOM(层叠样式表对象模型)，一棵仅含有样式信息的树。</li>
<li>CSSOM和DOM开始合并构成渲染树（render Tree），每个节点开始包含具体的样式信息。浏览器就是根据render tree来绘制页面的</li>
<li>计算渲染树中个各个节点的位置信息，即布局阶段。</li>
<li>将布局后的渲染树显示到界面上。</li>
</ol>
<h2 id="CSS阻塞渲染"><a href="#CSS阻塞渲染" class="headerlink" title="CSS阻塞渲染"></a>CSS阻塞渲染</h2><ul>
<li>根据浏览器的流程，当CSSOM还没构建完成时，页面是不会渲染到浏览器界面的，这也是为什么当CSS下载过慢时，会出现白屏的现象</li>
<li>CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。</li>
</ul>
<h2 id="CSS的引入方式"><a href="#CSS的引入方式" class="headerlink" title="CSS的引入方式"></a>CSS的引入方式</h2><h3 id="01-内联式-行内引入"><a href="#01-内联式-行内引入" class="headerlink" title="01.内联式,行内引入:"></a>01.内联式,行内引入:</h3><ol>
<li>直接在html的标签中书写css。这是一种最为原始也是最容易理解的</li>
<li>样式内容书写在html标签的style属性中，多个css样式可以写在一起，使用分号隔开。<code>&lt;标签名 style=&quot;具体样式属性: 属性值;&quot;&gt;内容&lt;/标签名&gt;</code></li>
<li>样式书写是 样式名:样式值; (注意全部是英文半角符号)</li>
</ol>
<h4 id="内联样式的特点与缺点"><a href="#内联样式的特点与缺点" class="headerlink" title="内联样式的特点与缺点"></a>内联样式的特点与缺点</h4><ol>
<li>冗余代码多，代码量大</li>
<li>不利于维护和修改</li>
<li>优先级相对来说较高，个别特殊的效果可以使用，但是不要滥用</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>内联式引入css<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;background-color: green;width: 100px;height: 100px;float: left;margin: 10px;color: #fff;text-align: center;line-height: 100px;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>



<h3 id="02-嵌入式引入-头部引入"><a href="#02-嵌入式引入-头部引入" class="headerlink" title="02.嵌入式引入  头部引入"></a>02.嵌入式引入  头部引入</h3><ol>
<li>可以把样式书写在style标签中</li>
<li>然后把style标签放在head标签中</li>
<li>使用css选择器选择你要控制的元素，然后书写样式</li>
</ol>
<h4 id="嵌入式引入特点"><a href="#嵌入式引入特点" class="headerlink" title="嵌入式引入特点"></a>嵌入式引入特点</h4><ol>
<li>统一放置在 style 标签当中，然后通过选择器，将规定样式和对应的标签建立联系，便于维护和修改</li>
<li>CSS 样式修改时并不需要翻阅 HTML 代码，也不需要去针对每个 HTML 标签处理样式，只需要调整style 标签中的样式，就可以针对性修改，页面达到了样式与结构相分离</li>
<li>代码量少</li>
<li>相对整站来说，存在冗余代码</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>嵌入式引入css<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-tag">li</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">color</span>:red;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: yellow;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>



<h3 id="03-css外部引入"><a href="#03-css外部引入" class="headerlink" title="03.css外部引入"></a>03.css外部引入</h3><ol>
<li>在外部新建一个css文件（后缀是.css），把样式写在外部的css文件中。</li>
<li>当一个页面需要外部css的时候，可以使用link标签把css引入进来,把link标签书写在head标签中 <code>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;./index.css&quot;&gt;</code></li>
<li>link标签书写的位置应该和style是一样的<ul>
<li>href:相关联css的路径</li>
<li>rel：stylesheet link引入的css和当前的文档html进行关联</li>
<li>type：text&#x2F;css 引入的格式是text文本，是css文本</li>
</ul>
</li>
</ol>
<h4 id="css外部引入特点"><a href="#css外部引入特点" class="headerlink" title="css外部引入特点"></a>css外部引入特点</h4><ol>
<li>将html和css完全分离成两个文件</li>
<li>一个css文件可以控制多个html文件</li>
<li>相对单页有冗余代码</li>
<li>相对来说有服务器压力</li>
</ol>
<h3 id="04-重绘重排"><a href="#04-重绘重排" class="headerlink" title="04.重绘重排"></a>04.重绘重排</h3><ul>
<li><strong>重排(回流) :</strong> 当render tree中的一部分或者是全部，因为元素的尺寸、布局、隐藏等等改变引起页面的重新渲染，这个过程称作为重排，完成重排以后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘。</li>
<li><strong>重绘</strong>: 当render tree（渲染树）中更新的属性只会影响元素的外观、风格，不会影响元素的布局的时候，浏览器需要重新绘制当前元素的样式，被称作为重绘。</li>
<li>重绘不会引起重排，但重排一定会引起重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。</li>
</ul>
<h3 id="05-style标签和link标签的书写位置"><a href="#05-style标签和link标签的书写位置" class="headerlink" title="05.style标签和link标签的书写位置"></a>05.style标签和link标签的书写位置</h3><p>如果书写在非head标签的位置可能会引发一些问题</p>
<ol>
<li>不便于维护:后期维护的时候需要花费时间去寻找代码书写位置</li>
<li><strong>会引起页面的回流（重排）和重绘</strong><ul>
<li>页面从上至下去解析，假设style标签写在body后边，读取这个style之前，整个网页的文档已经渲染的差不多了，发现还有style标签,页面就会重新计算页面的样式 然后重新渲染，所以会引起 重绘和重排，网页可能出现闪烁，并且加载变慢</li>
<li>所以style标签应该书写在head标签中</li>
</ul>
</li>
</ol>
<h3 id="06-import引入"><a href="#06-import引入" class="headerlink" title="06.@import引入"></a>06.@import引入</h3><p>@import是css提供的引入css文件的一种方式</p>
<p>使用@import方法在style标签中引入</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-keyword">@import</span> <span class="hljs-string">&quot;index.css&quot;</span>;<br><span class="hljs-keyword">@import</span> url(index.css);<br><span class="hljs-keyword">@import</span> url(<span class="hljs-string">&quot;index.css&quot;</span>);<br></code></pre></td></tr></table></figure>



<p><strong>link</strong>引入和***@impor***t引入的对比:</p>
<ol>
<li><strong>功能范围不同</strong> link属于html标签 @import只是css提供的引入css的功能</li>
<li><strong>加载顺序不同</strong> 页面在加载的时候，link引入的css会同时被加载 @import引入的css只有等页面全部下载完成以后才进行加载，所以可能会出现闪烁</li>
<li><strong>兼容性</strong> link所有浏览器都支持 @import低版本ie不支持</li>
<li><strong>使用JS控制样式</strong> JS只能控制link标签 @import是不能够被JS控制的</li>
</ol>
<h2 id="CSS选择器"><a href="#CSS选择器" class="headerlink" title="CSS选择器"></a>CSS选择器</h2><h3 id="CSS基础选择器"><a href="#CSS基础选择器" class="headerlink" title="CSS基础选择器"></a>CSS基础选择器</h3><h4 id="01-id选择器"><a href="#01-id选择器" class="headerlink" title="01.id选择器"></a>01.id选择器</h4><p>我们可以给元素设置id属性，然后通过 <code>#</code>+<code>id属性值</code> 的方式来选择这个元素</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>id选择器<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-id">#three</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: green;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;three&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>



<h4 id="02-类选择器"><a href="#02-类选择器" class="headerlink" title="02.类选择器"></a>02.类选择器</h4><ol>
<li>可以给不同的元素，进行分组。</li>
<li>给要被分组的元素设置class属性  选择器中使用<code> .</code>+ <code>class属性值</code> 来选择元素</li>
<li>类不一定多个元素，也可以是一个元素</li>
<li>一个class可以设置多个类名，但是只能有一个class属性 ,一个元素的多个class属性的值可以用空格隔开，就代表书写多个类名</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>id选择器<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-tag">li</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.show</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: green;</span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.active</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: yellow;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.con</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;show&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;show&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;active con&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>



<h4 id="03-标签选择器"><a href="#03-标签选择器" class="headerlink" title="03.标签选择器"></a>03.标签选择器</h4><ul>
<li>通过标签名来选择元素</li>
<li>会选择页面中所有的这个标签的元素</li>
</ul>
<h4 id="04-通配符"><a href="#04-通配符" class="headerlink" title="04.通配符(*)"></a>04.通配符(*)</h4><ul>
<li><p>通配符使用星号<code>*</code>表示，意思是“所有的”。</p>
</li>
<li><p>在CSS中，同样使用<code>*</code>代表所有的标签或元素，它叫做通配符选择器。</p>
</li>
<li><p>不过，由于<code>*</code>会匹配所有的元素，这样会影响网页渲染的时间，因此很多人开始停止使用<code>*</code>通配符选择器</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/*这里就把所有元素的字体设置为红色*/</span><br>*&#123; <span class="hljs-attribute">color</span> : red; &#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h4 id="05-important-规则"><a href="#05-important-规则" class="headerlink" title="05.!important 规则"></a>05.!important 规则</h4><ul>
<li><p>!important，作用是<strong>提高指定样式规则的应用优先权（优先级）</strong>。</p>
</li>
<li><p>语法格式**{ cssRule !important }**，即写在定义的最后面，例如：box{color:red !important;}。</p>
</li>
<li><p><strong>使该条样式属性声明具有最高优先级</strong></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-tag">div</span> &#123; <span class="hljs-attribute">color</span>: <span class="hljs-number">#f00</span> <span class="hljs-meta">!important</span>; &#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h4 id="06-多个样式来源的优先级确定"><a href="#06-多个样式来源的优先级确定" class="headerlink" title="06.多个样式来源的优先级确定"></a>06.多个样式来源的优先级确定</h4><ul>
<li><p>!important &gt; 行内书写 &gt; id &gt; 类 &gt; 标签名 &gt; 通配符 &gt; 继承</p>
</li>
<li><p>!important &gt; 行内书写 &gt; id &gt; 类 &gt; 标签名 &gt; 通配符 &gt; 默认</p>
</li>
<li><p>样式继承不是一个默认行为，实际上而是看某一个属性的默认值是否是<code>inherit</code>。所以不比较继承和默认的优先级</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>优先级<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        *&#123;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-comment">/*  *&gt;默认样式  */</span></span><br><span class="language-css">            <span class="hljs-attribute">color</span>: pink;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-tag">p</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">            <span class="hljs-comment">/*标签名选择器 &gt;  通配符**/</span></span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-comment">/*!important书写在某个样式的后边</span></span><br><span class="hljs-comment"><span class="language-css">            这条样式无论写在哪一个选择器中，这条样式永远优先级最大*/</span></span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">100px</span> <span class="hljs-meta">!important</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-comment">/*color: green;*/</span></span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.con</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">20px</span>;</span><br><span class="language-css">            <span class="hljs-comment">/*类名选择器&gt;标签名选择器*/</span></span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-id">#box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">30px</span>;</span><br><span class="language-css">            <span class="hljs-comment">/*id选择器&gt;类名选择器*/</span></span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-comment">/*行内书写&gt;id选择器*/</span></span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-tag">div</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">color</span>: red;</span><br><span class="language-css">            <span class="hljs-attribute">font-style</span>: normal;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>        我是div<br>        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;con&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;margin: 50px;&quot;</span>&gt;</span>我是p标签<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span>hellow<span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure></li>
</ul>
<h2 id="CSS复杂选择器"><a href="#CSS复杂选择器" class="headerlink" title="CSS复杂选择器"></a>CSS复杂选择器</h2><h3 id="后代选择器"><a href="#后代选择器" class="headerlink" title="后代选择器"></a>后代选择器</h3><p>后代选择器使用<code>空格</code>间隔开 （<code>A B</code>：在A元素中寻找后代（不一定是儿子）是B的元素）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>后代选择器<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">       <span class="hljs-comment">/* .box li&#123;</span></span><br><span class="hljs-comment"><span class="language-css">            background-color: red;</span></span><br><span class="hljs-comment"><span class="language-css">        &#125;*/</span></span><br><span class="language-css">        <span class="hljs-selector-tag">div</span> <span class="hljs-selector-tag">li</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.show</span>&#123;&#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.box</span> <span class="hljs-selector-class">.show</span>&#123;&#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span> <span class="hljs-selector-class">.show</span>&#123;&#125;</span><br><span class="language-css">        <span class="hljs-selector-tag">html</span> <span class="hljs-selector-tag">body</span> <span class="hljs-selector-tag">div</span> <span class="hljs-selector-class">.show</span>&#123;&#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>p1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>p2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>span1<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>111<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;show&quot;</span>&gt;</span>222<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ol</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>333<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>444<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ol</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>



<h3 id="子代选择器"><a href="#子代选择器" class="headerlink" title="子代选择器"></a>子代选择器</h3><p>子代选择器使用 <code>&gt;</code> 间隔开 （<code>A&gt;B</code>：在A元素中寻找儿子辈元素 是B的元素）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>子代选择器<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box</span>&gt;<span class="hljs-selector-class">.show</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>p1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>p2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>span1<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>111<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;show&quot;</span>&gt;</span>222<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;show&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ol</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>333<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;show&quot;</span>&gt;</span>444<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ol</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="相邻兄弟选择器"><a href="#相邻兄弟选择器" class="headerlink" title="相邻兄弟选择器"></a>相邻兄弟选择器</h3><p>相邻兄弟选择器使用 <code>+</code> 间隔开 （<code>A+B</code>：在A元素的下边紧贴着A的元素 并且是B 才能被选中）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>相邻兄弟选择器<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&gt;<span class="hljs-selector-class">.show</span>+<span class="hljs-selector-tag">span</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: yellow;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&gt;<span class="hljs-selector-class">.show</span>+<span class="hljs-selector-tag">p</span>&#123;</span><br><span class="language-css">            <span class="hljs-comment">/*选不中状态*/</span></span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: blue;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>p1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;show&quot;</span>&gt;</span>p2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>span1<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>p3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>span2<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="通用兄弟选择器"><a href="#通用兄弟选择器" class="headerlink" title="通用兄弟选择器"></a>通用兄弟选择器</h3><p>相邻兄弟选择器使用 <code>~</code> 间隔开 （<code>A~B</code>：在A元素的下边兄弟元素 并且是B 就能被选中）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>通用兄弟选择器<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&gt;<span class="hljs-selector-class">.show</span>~<span class="hljs-selector-tag">span</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: yellow;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>span0<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>p1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;show&quot;</span>&gt;</span>p2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>span1<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>p3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>span2<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="群组选择器"><a href="#群组选择器" class="headerlink" title="群组选择器"></a>群组选择器</h3><ul>
<li><p>将多个选择器使用 <code>，</code> 隔开 可以同时对多个选择器设置样式</p>
</li>
<li><p>如果多个元素有相同的样式，方法有两种</p>
<ul>
<li>使用一个共同的类名</li>
<li>使用群组选择器</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>群组选择器<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-comment">/*.con&#123;</span></span><br><span class="hljs-comment"><span class="language-css">            width: 100px;</span></span><br><span class="hljs-comment"><span class="language-css">            height: 100px;</span></span><br><span class="hljs-comment"><span class="language-css">        &#125;*/</span></span><br><span class="language-css">        <span class="hljs-selector-class">.con1</span>,<span class="hljs-selector-class">.con2</span>,<span class="hljs-selector-class">.con3</span>,<span class="hljs-selector-class">.con4</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.con1</span>&#123;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.con2</span>&#123;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#c0ff8b</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.con3</span>&#123;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#5e8fff</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.con4</span>&#123;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ff2a91</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;con1 con&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;con2 con&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;con3 con&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;con4 con&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure></li>
</ul>
<h3 id="交集选择器"><a href="#交集选择器" class="headerlink" title="交集选择器"></a>交集选择器</h3><ul>
<li><p>“交集”选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集</p>
</li>
<li><p>其中第一必须是标签名选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>交集选择器<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        *&#123;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">list-style</span>: none;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-css">            当我们想要选择： 某一个元素 并且这个元素拥有某个类名的时候</span></span><br><span class="hljs-comment"><span class="language-css"></span></span><br><span class="hljs-comment"><span class="language-css">        */</span></span><br><span class="language-css">        <span class="hljs-selector-class">.list</span> <span class="hljs-selector-tag">li</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">30px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">30px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#000</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">30px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.list</span> <span class="hljs-selector-tag">li</span><span class="hljs-selector-class">.active</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: skyblue;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;list&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;active&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure></li>
</ul>
<h3 id="选择器的优先级"><a href="#选择器的优先级" class="headerlink" title="选择器的优先级"></a>选择器的优先级</h3><h4 id="相同优先级的选择器生效方式"><a href="#相同优先级的选择器生效方式" class="headerlink" title="相同优先级的选择器生效方式"></a>相同优先级的选择器生效方式</h4><ul>
<li><p>当优先级相同的时候，在后边书写的样式优先级高</p>
</li>
<li><p>link元素 其实也是把样式关联上，选择器优先级相同的情况写，后写的生效</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>选择器的优先级<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.con</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: green;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./01.css&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box con show&quot;</span>&gt;</span><br>        box<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure></li>
</ul>
<h3 id="选择器优先级的权重计算"><a href="#选择器优先级的权重计算" class="headerlink" title="选择器优先级的权重计算"></a>选择器优先级的权重计算</h3><ul>
<li>行内样式: 1000</li>
<li>id: 100</li>
<li>类: 10</li>
<li>标签名: 1</li>
</ul>
<h2 id="浮动"><a href="#浮动" class="headerlink" title="浮动"></a>浮动</h2><p>float属性:</p>
<ul>
<li>左浮动（left）：让元素沿着容器左侧放置，允许文本和内联元素环绕它，它从正常的页面中移除，虽然还保持一点流动性</li>
<li>右浮动（right）：让元素沿着容器右侧放置，允许文本和内联元素环绕它，它从正常的页面中移除，虽然还保持一点流动性</li>
<li>none：不浮动</li>
</ul>
<h3 id="浮动解决一行显示快标签的问题"><a href="#浮动解决一行显示快标签的问题" class="headerlink" title="浮动解决一行显示快标签的问题"></a>浮动解决一行显示快标签的问题</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>浮动解决一行显示块标签问题<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box1</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">5px</span>;</span><br><span class="language-css">            <span class="hljs-comment">/*float: left;*/</span></span><br><span class="language-css">            <span class="hljs-attribute">float</span>: right;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.box2</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">150px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">150px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: yellow;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">5px</span>;</span><br><span class="language-css">            <span class="hljs-comment">/*float: left;*/</span></span><br><span class="language-css">            <span class="hljs-attribute">float</span>: right;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box2&quot;</span>&gt;</span>aa<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>



<h3 id="可能被阻挡的浮动"><a href="#可能被阻挡的浮动" class="headerlink" title="可能被阻挡的浮动"></a>可能被阻挡的浮动</h3><p>宽度不够,元素就不会上移</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>可能被阻挡的浮动<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        *&#123;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">list-style</span>: none;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-tag">ul</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">960px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#5df2ff</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-tag">ul</span> <span class="hljs-selector-tag">li</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="浮动对元素的影响"><a href="#浮动对元素的影响" class="headerlink" title="浮动对元素的影响"></a>浮动对元素的影响</h3><ul>
<li>浮动对元素的影响:<ul>
<li><strong>行标签</strong>：可以设置宽高, 完美支持padding和margin</li>
<li><strong>快标签</strong>: 不再独占一行, 仍然可以设置宽和高, 构成了BFC，不再进行父级塌陷,  完美支持margin和padding</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>浮动对元素的影响<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">10px</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-comment">/*float: left;*/</span></span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.span1</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">30px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#5df2ff</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">40px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">20px</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;span1&quot;</span>&gt;</span>span1<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="脱离文档流"><a href="#脱离文档流" class="headerlink" title="脱离文档流"></a>脱离文档流</h3><ul>
<li>设置浮动的元素会脱离文档流，浮动的元素，并不属于文档中的普通流，元素漂浮于普通流之上，像浮云一样，但能够左右浮动。</li>
<li>由于浮动这种特性，导致本属于普通流的元素设置浮动后，如果父级不存在其他普通流元素，父级的高度就会为0，如果父级存在其他普通流的元素，父级的高度也会受影响</li>
</ul>
<h3 id="清除浮动"><a href="#清除浮动" class="headerlink" title="清除浮动"></a>清除浮动</h3><ul>
<li><p><strong>浮动的概念</strong>：让元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者是上一个浮动元素或者是上一个不浮动兄弟元素就停下来</p>
</li>
<li><p><strong>高度塌陷</strong>：</p>
<ul>
<li>浮动元素以后，脱离父级内容区域，父级没有内容撑开自身的高度</li>
<li>父级的兄弟元素是 按照父级的位置进行布局的，所以页面会乱掉</li>
</ul>
</li>
<li><p><strong>清除浮动</strong>：清除浮动不是不让元素浮动，而是清除浮动对父级带来的影响</p>
</li>
<li><p><strong>清除浮动的方法</strong>：</p>
<ol>
<li><p>给浮动元素的父级设置高度height（不推荐使用）</p>
<p>缺点: 很多情况下 高度都是不确定,所以不适用</p>
</li>
<li><p>以浮制浮, 给浮动元素的父元素设置浮动，原理是开启BFC（不推荐使用）</p>
<p>缺点: 只有在父级需要浮动的时候，可以这么清除，否则父级的浮动会影响布局</p>
</li>
<li><p>overflow：hidden；给父级设置，原理也是开启BFC（可以使用）</p>
<p>优点：简单快捷</p>
<p>缺点：元素超出的时候，会隐藏超出部分</p>
</li>
<li><p>br清除浮动：在浮动元素的后边书写一个br。br中书写clear属性，值为all</p>
<p>缺点：增加不必要的元素，不符合样式与结构相分离的要求</p>
</li>
<li><p>clear清浮动法：给浮动元素的下边添加一个块元素，书写样式clear:both</p>
<p>缺点：增加额外的结构，不符合语义化标准</p>
</li>
<li><p>after伪元素清浮动（推荐）</p>
<p>可以给所有浮动元素的父级一个 clearFix的类名</p>
<p>当一个元素需要清除浮动的时候 直接设置clearFix类名即可</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.clearFix</span><span class="hljs-selector-pseudo">:after</span>&#123;<br>    <span class="hljs-attribute">content</span>:<span class="hljs-string">&quot;\200B&quot;</span>;  必须拥有<span class="hljs-attribute">content</span>属性   内容为空<br>    <span class="hljs-attribute">display</span>: block;   必须块标签才能清浮动<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;          高度为<span class="hljs-number">0</span> 不占用空间<br>    <span class="hljs-attribute">clear</span>: both;        清除浮动<br>&#125;<br><br><span class="hljs-selector-class">.clearFix</span>&#123;  //兼容ie<br>    *zoom:<span class="hljs-number">1</span>;    /<span class="hljs-comment">/*是css  hack 只有ie6.7 认识</span><br><span class="hljs-comment">    ie6、7 不支持伪元素，所以需要开启元素的haslayout来清除浮动</span><br><span class="hljs-comment">&#125;</span><br></code></pre></td></tr></table></figure></li>
</ol>
</li>
</ul>
<h2 id="定位"><a href="#定位" class="headerlink" title="定位"></a>定位</h2><h3 id="相对定位"><a href="#相对定位" class="headerlink" title="相对定位"></a>相对定位</h3><ul>
<li><p>position:relative;</p>
</li>
<li><p>让元素相对定位：</p>
<p>元素先放置在未添加定位时候的区域</p>
<p>然后再不改变页面布局的情况下进行移动</p>
<p>(其他元素没有受到任何影响, 自身原来的位置也保留, 和浮动可以一起使用)</p>
</li>
<li><p>位置设置</p>
<ul>
<li>left: 设置元素 左边缘 到 原来左边缘位置 的距离</li>
<li>right: 设置元素 右边缘 到 原来右边缘位置 的距离</li>
<li>top: 设置元素 上边缘 到 原来上边缘位置 的距离</li>
<li>bottom: 设置元素 下边缘 到 原来下边缘位置 的距离</li>
<li>在相对定位中：left为正 元素向右走</li>
<li>在相对定位中：top为正 元素向下走</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>相对定位<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span> <span class="hljs-selector-tag">div</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.con1</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: orangered;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="language-css">            <span class="hljs-attribute">left</span>: <span class="hljs-number">0px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">right</span>: <span class="hljs-number">0px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.con2</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#5df2ff</span>;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;con1&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;con2&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure></li>
</ul>
<h3 id="包含块"><a href="#包含块" class="headerlink" title="包含块"></a>包含块</h3><ul>
<li><p>绝对定位的元素 相对于它的包含块进行定位</p>
</li>
<li><p>如何确定一个元素的包含块，完全取决于它自身的position属性：</p>
<ul>
<li><p>如果一个元素自身的position属性是 static或者是relative：它的包含块就是离他最近的祖先元素或者是格式化上下文。</p>
</li>
<li><p>如果一个元素自身的position属性是absolute，</p>
<p>它的包含块就是离他最近的 拥有定位属性（值不为static）的元素</p>
</li>
<li><p>如果一个元素自身的position属性是fixed</p>
<p>它的包含块就是viewport（视口）</p>
</li>
<li><p>补充：如果一个元素的position属性是absolute 或者是 fixed 在下边几种情况下，包含块会发生改变</p>
<ol>
<li>当祖先元素的 拥有 transform 或 perspective 属性 并且值不为none的时候 它也是被当做包含块.</li>
<li>当祖先元素 拥有 filter属性的时候（值不为none） 它也可以被当做包含块</li>
</ol>
</li>
<li><p>如果由内向外找不到包含块条件的元素，那么html（根元素）被称作为初始包含块</p>
</li>
</ul>
</li>
</ul>
<h3 id="绝对定位"><a href="#绝对定位" class="headerlink" title="绝对定位:"></a>绝对定位:</h3><ol>
<li><p>不预留任何的空间（脱离页面流)</p>
</li>
<li><p>通过指定当前元素 相对于其包含块偏移的量 来确定当前元素的位置</p>
</li>
<li><p>绝对定位以后，浮动失效。margin padding仍然可以使用</p>
<ul>
<li>left: 0; 让定位元素的左边距离包含块左边为0</li>
<li>top: 0;让定位元素的上边距离包含块上边为0</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>绝对定位<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">800px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">500px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto;</span><br><span class="language-css">            <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-comment">/*transform: rotateX(0deg);*/</span></span><br><span class="language-css">            <span class="hljs-comment">/*perspective: 300px;*/</span></span><br><span class="language-css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.inner</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">600px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: deeppink;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">50px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.con</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: greenyellow;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">30px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="language-css"></span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: yellow;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;inner&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;con&quot;</span>&gt;</span><br>                con<br>                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure></li>
</ol>
<h3 id="固定定位"><a href="#固定定位" class="headerlink" title="固定定位"></a>固定定位</h3><ul>
<li><p>不为元素预留空间（脱离页面流）</p>
</li>
<li><p>相对于视口（viewport）的位置来定位元素的</p>
</li>
<li><p>滚动页面滚动条的时候，视口不发生改变，元素位置也不会改变</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>固定定位<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.con</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">4000px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#3c3c3c</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.left</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: fixed;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">150px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">top</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">            <span class="hljs-attribute">text-align</span>: center;</span><br><span class="language-css">            <span class="hljs-attribute">line-height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">font-size</span>: <span class="hljs-number">30px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">animation</span>: change .<span class="hljs-number">2s</span> linear infinite;</span><br><span class="language-css"></span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.right</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: fixed;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">150px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">top</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">            <span class="hljs-attribute">text-align</span>: center;</span><br><span class="language-css">            <span class="hljs-attribute">line-height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">font-size</span>: <span class="hljs-number">30px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;</span><br><span class="language-css">            <span class="hljs-attribute">animation</span>: change .<span class="hljs-number">2s</span> linear infinite;</span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">        <span class="hljs-keyword">@keyframes</span> change &#123;</span><br><span class="language-css">            <span class="hljs-number">0%</span>&#123;</span><br><span class="language-css">                <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">            &#125;</span><br><span class="language-css">            <span class="hljs-number">20%</span>&#123;</span><br><span class="language-css">                <span class="hljs-attribute">background-color</span>: green;</span><br><span class="language-css">            &#125;</span><br><span class="language-css">            <span class="hljs-number">40%</span>&#123;</span><br><span class="language-css">                <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">            &#125;</span><br><span class="language-css">            <span class="hljs-number">60%</span>&#123;</span><br><span class="language-css">                <span class="hljs-attribute">background-color</span>: yellowgreen;</span><br><span class="language-css">            &#125;</span><br><span class="language-css">            <span class="hljs-number">80%</span>&#123;</span><br><span class="language-css">                <span class="hljs-attribute">background-color</span>: grey;</span><br><span class="language-css">            &#125;</span><br><span class="language-css">            <span class="hljs-number">100%</span>&#123;</span><br><span class="language-css">                <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">            &#125;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;con&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;gg&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span><br>            开局一条狗<br>            <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            装备全靠爆<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span><br>            我是砸砸辉<br>            <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            是兄弟就来<br>            <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            砍我吧<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure></li>
</ul>
<h3 id="z-index属性"><a href="#z-index属性" class="headerlink" title="z-index属性"></a>z-index属性</h3><ol>
<li>指定了一个定位属性的元素 及其后代 的层叠顺序</li>
<li>只有定位元素（非static值）拥有 z-index属性</li>
<li>z-index的值没有单位 理论上来说 z-index的值大的元素 会覆盖小的元素</li>
<li>定位元素默认的z-index 的值 是 auto</li>
<li>如果一个拥有z-index属性的定位元素中 子元素也设置了z-index</li>
</ol>
<p>​		那么子元素会重新创建一个层叠上下文，子元素的z-index只能在当前的层叠上下文中对比排列</p>
<ul>
<li><p>元素层叠顺序:</p>
<p> z-index为负&lt; background&lt; border&lt; 块级元素 &lt;浮动元素 &lt;内联元素 &lt;没有设置z-index的定位元素 &lt; z-index为正</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>z-index属性<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">500px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">34</span>,<span class="hljs-number">45</span>,<span class="hljs-number">124</span>,.<span class="hljs-number">5</span>);</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">            <span class="hljs-attribute">z-index</span>: <span class="hljs-number">1</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span> <span class="hljs-selector-class">.con</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">111</span>,<span class="hljs-number">43</span>,<span class="hljs-number">21</span>,.<span class="hljs-number">5</span>);</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">            <span class="hljs-attribute">z-index</span>: <span class="hljs-number">1000</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.inner</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">234</span>,<span class="hljs-number">124</span>,<span class="hljs-number">35</span>,<span class="hljs-number">1</span>);</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">            <span class="hljs-attribute">top</span>: <span class="hljs-number">180px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">z-index</span>: <span class="hljs-number">4</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;con&quot;</span>&gt;</span><br><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;inner&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>





<h2 id="CSS其他"><a href="#CSS其他" class="headerlink" title="CSS其他"></a>CSS其他</h2><h3 id="css精灵图"><a href="#css精灵图" class="headerlink" title="css精灵图"></a>css精灵图</h3><ul>
<li><p>是一种网页图片的应用处理方式，允许将一个页面中很多零星的小图片包含到一张大图中去，当访问页面的时候，就不会一张张的去请求显示图片对于当前的网络来说，小于200k的文件加载速度是一样的通过background-position属性 将图片定位到需要的位置即可</p>
</li>
<li><p>优点:</p>
<p>减少图片大小</p>
<p>减少服务器请求次数</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>精灵图<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        *&#123;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">list-style</span>: none;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">101px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="language-css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#3c3c3c</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">100px</span> auto <span class="hljs-number">0</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">102px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin-top</span>: -<span class="hljs-number">1px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.box</span> <span class="hljs-selector-tag">li</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">50px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">80px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">border-right</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#3c3c3c</span>;</span><br><span class="language-css">            <span class="hljs-attribute">border-top</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#3c3c3c</span>;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.box</span> <span class="hljs-selector-tag">li</span> <span class="hljs-selector-tag">i</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">45px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">40px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">display</span>: block;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span> auto <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background</span>: <span class="hljs-built_in">url</span>(<span class="hljs-string">&quot;../images/jd_2.png&quot;</span>) <span class="hljs-number">0</span> <span class="hljs-number">0</span> no-repeat;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.box</span> <span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">:nth-child</span>(<span class="hljs-number">1</span>) <span class="hljs-selector-tag">i</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-position</span>: -<span class="hljs-number">1px</span> -<span class="hljs-number">3px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.box</span> <span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">:nth-child</span>(<span class="hljs-number">2</span>) <span class="hljs-selector-tag">i</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-position</span>: -<span class="hljs-number">70px</span> -<span class="hljs-number">5px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.box</span> <span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">:nth-child</span>(<span class="hljs-number">3</span>) <span class="hljs-selector-tag">i</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-position</span>: -<span class="hljs-number">2px</span> -<span class="hljs-number">73px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.box</span> <span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">:nth-child</span>(<span class="hljs-number">4</span>) <span class="hljs-selector-tag">i</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-position</span>: -<span class="hljs-number">70px</span> -<span class="hljs-number">73px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box</span> <span class="hljs-selector-tag">li</span> <span class="hljs-selector-tag">p</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">text-align</span>: center;</span><br><span class="language-css">            <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">5px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br><br><br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>加油卡<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>白条<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>机票<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">i</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>电影票<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure></li>
</ul>
<h3 id="a标签的4个伪类"><a href="#a标签的4个伪类" class="headerlink" title="a标签的4个伪类"></a>a标签的4个伪类</h3><ul>
<li>四个伪类<ul>
<li>link：当有链接属性时</li>
<li>visited: 当连接被访问过以后</li>
<li>hover：当连接被鼠标悬浮的时候</li>
<li>active:当连接在激活状态的时候</li>
</ul>
</li>
<li>位置不能互换<ul>
<li>这4个选择器 优先级是一样的。</li>
<li>顺序改变就可能后边覆盖前边的</li>
<li>比如visited写在最后，那么当连接被访问过后，访问过后的颜色就会覆盖hover和active</li>
</ul>
</li>
<li>记忆：爱恨法则 love-hate</li>
<li>hover适用于多数其他元素，并且伪元素也可以使用</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>a标签的4个伪类<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-tag">a</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">color</span>: pink;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.a1</span><span class="hljs-selector-pseudo">:link</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">color</span>: yellow;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.a2</span><span class="hljs-selector-pseudo">:visited</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">color</span>: blueviolet;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.a3</span><span class="hljs-selector-pseudo">:hover</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">color</span>:red;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.a4</span><span class="hljs-selector-pseudo">:active</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">color</span>: <span class="hljs-number">#2ba5eb</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;a1&quot;</span>&gt;</span>link 当有链接属性时<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;####&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;a2&quot;</span>&gt;</span>visited 当连接被访问过之后<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;####&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;a3&quot;</span>&gt;</span>hover 当连接被鼠标悬浮的时候<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;####&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;a4&quot;</span>&gt;</span>active:当连接在激活状态的时候<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;##&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;a1 a2 a3 a4&quot;</span>&gt;</span>同时设置4个伪类<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="a标签伪类的应用"><a href="#a标签伪类的应用" class="headerlink" title="a标签伪类的应用"></a>a标签伪类的应用</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>hover的下拉效果<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        *&#123;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">list-style</span>: none;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#ffa000</span>;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span> <span class="hljs-selector-tag">p</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">50px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">line-height</span>: <span class="hljs-number">50px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">text-align</span>: center;</span><br><span class="language-css">            <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ccc</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span> <span class="hljs-selector-class">.con</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">400px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">top</span>:<span class="hljs-number">50px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#2ba5eb</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">display</span>: none;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.con</span> <span class="hljs-selector-tag">li</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">line-height</span>: <span class="hljs-number">30px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span><span class="hljs-selector-pseudo">:hover</span>&gt;<span class="hljs-selector-class">.con</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">display</span>: block;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span><span class="hljs-selector-pseudo">:hover</span>&gt;<span class="hljs-selector-tag">p</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span> <span class="hljs-selector-class">.con</span> <span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">:hover</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: deeppink;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>我是一个标题<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;con&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>新闻<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>娱乐<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>我的<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>天气<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>真好<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="伪元素"><a href="#伪元素" class="headerlink" title="伪元素"></a>伪元素</h3><h4 id="常用伪元素"><a href="#常用伪元素" class="headerlink" title="常用伪元素"></a>常用伪元素</h4><ul>
<li><p>伪元素可以理解为“虚假的元素”，他们虽然会在内容元素的前后插入额外的元素，但并不会在文档中生成，在文档的源代码当中并不能够找到它们.</p>
</li>
<li><p>虽然在结构上是虚假元素，但是在表现上和普通元素没有什么区别，能为它们添加任何样式，比如改变文字颜色、添加背景、调整字体大小等等</p>
</li>
<li><p>after:</p>
<p><strong>在当前元素的最后边插入一个伪元素</strong></p>
</li>
<li><p>before:</p>
<p><strong>在当前元素的最前边插入一个伪元素</strong></p>
</li>
<li><p>伪元素必须拥有content属性 ，才能生效，伪元素默认是一个行内元素，伪元素对其他属性基本都是支持的</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>伪元素<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">50px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.box</span><span class="hljs-selector-pseudo">:after</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">content</span>:<span class="hljs-string">&quot;没有我你是不行的&quot;</span>;</span><br><span class="language-css">            <span class="hljs-attribute">display</span>: block;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.box</span><span class="hljs-selector-pseudo">:before</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">content</span>:<span class="hljs-string">&quot;hahahah&quot;</span>;</span><br><span class="language-css">            <span class="hljs-attribute">display</span>: block;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">            <span class="hljs-attribute">left</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">top</span>: <span class="hljs-number">80px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span>我是一个box<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="其他伪元素"><a href="#其他伪元素" class="headerlink" title="其他伪元素"></a>其他伪元素</h4><ul>
<li><p>first-letter伪元素：</p>
<p>把一个块级元素的第一个文字选中，可以单独进行控制</p>
</li>
<li><p>first-line伪元素:</p>
<p>把一个块级元素的第一行选中，单独进行控制</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>其他伪元素<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-tag">p</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">line-height</span>: <span class="hljs-number">1.6</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-tag">p</span><span class="hljs-selector-pseudo">:first</span>-letter&#123;</span><br><span class="language-css">            <span class="hljs-attribute">font-size</span>: <span class="hljs-number">30px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-tag">p</span><span class="hljs-selector-pseudo">:first</span>-line&#123;</span><br><span class="language-css">            <span class="hljs-attribute">font-size</span>: <span class="hljs-number">24px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">color</span>: yellow;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好今天天气真的好<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="样式重置"><a href="#样式重置" class="headerlink" title="样式重置"></a>样式重置</h3><ul>
<li><p>什么是样式重置（css reset）</p>
<p>将html的默认样式全部去掉，需要的时候我们自行添加。</p>
</li>
<li><p>为什么是使用样式重置：</p>
<p>多数元素拥有自己的默认样式，并且我们很多都不需要</p>
<p>默认样式在不同浏览器中呈现的也不一定相同，就会导致浏览器展示页面不相同的现象</p>
<p>整个页面中 固定的风格代码，可以在样式重置中直接书写，不用每一个都设置</p>
</li>
<li><p>为什么不使用</p>
<p>样式重置简单，不够完整 一些demo可以使用，真正项目不推荐使用，请使用css reset</p>
<p><code>*</code>通配符 匹配所有的标签，影响很大 效率很低</p>
</li>
<li><p>normalize.css是什么</p>
<p>normalize觉得，存在即合理。保留了应该存在的默认样式，并且把每一个默认样式在浏览器中中统一了</p>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 清除内外边距 */</span><br><span class="hljs-selector-tag">body</span>, <span class="hljs-selector-tag">h1</span>, <span class="hljs-selector-tag">h2</span>, <span class="hljs-selector-tag">h3</span>, <span class="hljs-selector-tag">h4</span>, <span class="hljs-selector-tag">h5</span>, <span class="hljs-selector-tag">h6</span>, hr, <span class="hljs-selector-tag">p</span>, <span class="hljs-selector-tag">blockquote</span>,<br><span class="hljs-selector-tag">dl</span>, <span class="hljs-selector-tag">dt</span>, <span class="hljs-selector-tag">dd</span>, <span class="hljs-selector-tag">ul</span>, <span class="hljs-selector-tag">ol</span>, <span class="hljs-selector-tag">li</span>,<br>pre,<br><span class="hljs-selector-tag">fieldset</span>, lengend, <span class="hljs-selector-tag">button</span>, <span class="hljs-selector-tag">input</span>, <span class="hljs-selector-tag">textarea</span>,<br><span class="hljs-selector-tag">th</span>, <span class="hljs-selector-tag">td</span> &#123;<br>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;<br>    <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;<br>&#125;<br><br><span class="hljs-comment">/* 设置默认字体 */</span><br><span class="hljs-selector-tag">body</span>,<br><span class="hljs-selector-tag">button</span>, <span class="hljs-selector-tag">input</span>, select, <span class="hljs-selector-tag">textarea</span> &#123; <span class="hljs-comment">/* for ie */</span><br>    <span class="hljs-comment">/*font: 12px/1 Tahoma, Helvetica, Arial, &quot;宋体&quot;, sans-serif;*/</span><br>    <span class="hljs-attribute">font</span>: <span class="hljs-number">16px</span>/<span class="hljs-number">1.3</span> <span class="hljs-string">&quot;Microsoft YaHei&quot;</span>,Tahoma, Helvetica, Arial, <span class="hljs-string">&quot;\5b8b\4f53&quot;</span>, sans-serif; <span class="hljs-comment">/* 用 ascii 字符表示，使得在任何编码下都无问题 */</span><br>&#125;<br><br><span class="hljs-selector-tag">h1</span> &#123; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">18px</span>; <span class="hljs-comment">/* 18px / 12px = 1.5 */</span> &#125;<br><span class="hljs-selector-tag">h2</span> &#123; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>; &#125;<br><span class="hljs-selector-tag">h3</span> &#123; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">14px</span>; &#125;<br><span class="hljs-selector-tag">h4</span>, <span class="hljs-selector-tag">h5</span>, <span class="hljs-selector-tag">h6</span> &#123; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">100%</span>; &#125;<br><br><span class="hljs-selector-tag">address</span>, <span class="hljs-selector-tag">cite</span>, <span class="hljs-selector-tag">dfn</span>, <span class="hljs-selector-tag">em</span>, <span class="hljs-selector-tag">var</span>, <span class="hljs-selector-tag">i</span>&#123; <span class="hljs-attribute">font-style</span>: normal; &#125; <span class="hljs-comment">/* 将斜体扶正 */</span><br><span class="hljs-selector-tag">b</span>, <span class="hljs-selector-tag">strong</span>&#123; <span class="hljs-attribute">font-weight</span>: normal; &#125; <span class="hljs-comment">/* 将粗体扶细 */</span><br><span class="hljs-selector-tag">code</span>, <span class="hljs-selector-tag">kbd</span>, pre, <span class="hljs-selector-tag">samp</span>, tt &#123; <span class="hljs-attribute">font-family</span>: <span class="hljs-string">&quot;Courier New&quot;</span>, Courier, monospace; &#125; <span class="hljs-comment">/* 统一等宽字体 */</span><br>small &#123; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>; &#125; <span class="hljs-comment">/* 小于 12px 的中文很难阅读，让 small 正常化 */</span><br><br><span class="hljs-comment">/* 重置列表元素 */</span><br><span class="hljs-selector-tag">ul</span>, <span class="hljs-selector-tag">ol</span> &#123; <span class="hljs-attribute">list-style</span>: none; &#125;<br><br><span class="hljs-comment">/* 重置文本格式元素 */</span><br><span class="hljs-selector-tag">a</span> &#123; <span class="hljs-attribute">text-decoration</span>: none; &#125;<br><br><br><span class="hljs-comment">/* 重置表单元素 */</span><br><span class="hljs-selector-tag">legend</span> &#123; <span class="hljs-attribute">color</span>: <span class="hljs-number">#000</span>; &#125; <span class="hljs-comment">/* for ie6 */</span><br><span class="hljs-selector-tag">fieldset</span>, <span class="hljs-selector-tag">img</span> &#123; <span class="hljs-attribute">border</span>: none; &#125;<br><span class="hljs-selector-tag">button</span>, <span class="hljs-selector-tag">input</span>, select, <span class="hljs-selector-tag">textarea</span> &#123;<br>    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">100%</span>; <span class="hljs-comment">/* 使得表单元素在 ie 下能继承字体大小 */</span><br>&#125;<br><br><span class="hljs-comment">/* 重置表格元素 */</span><br><span class="hljs-selector-tag">table</span> &#123;<br>    <span class="hljs-attribute">border-collapse</span>: collapse;<br>    <span class="hljs-attribute">border-spacing</span>: <span class="hljs-number">0</span>;<br>&#125;<br><br><span class="hljs-comment">/* 重置 hr */</span><br>hr &#123;<br>    <span class="hljs-attribute">border</span>: none;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">1px</span>;<br>&#125;<br><br><span class="hljs-comment">/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */</span><br><span class="hljs-selector-tag">html</span> &#123; <span class="hljs-attribute">overflow-y</span>: scroll; &#125;<br></code></pre></td></tr></table></figure>



<h3 id="最小-x2F-最大-宽度-x2F-高度"><a href="#最小-x2F-最大-宽度-x2F-高度" class="headerlink" title="最小&#x2F;最大  宽度&#x2F;高度"></a>最小&#x2F;最大  宽度&#x2F;高度</h3><ul>
<li><p>使用min-height 来设置最小高度</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>最小高度<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#000</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-tag">header</span>,<span class="hljs-selector-tag">footer</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">text-align</span>: center;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>:<span class="hljs-number">40px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">line-height</span>: <span class="hljs-number">40px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.con</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid red;</span><br><span class="language-css">            <span class="hljs-attribute">line-height</span>: <span class="hljs-number">1.7</span>;</span><br><span class="language-css">            <span class="hljs-attribute">min-height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">header</span>&gt;</span><br>            头部<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;con&quot;</span>&gt;</span><br>            文章1 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            文章1 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            文章1 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            文章1 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            文章1 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            文章1 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            文章1 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            文章1 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            文章1 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">footer</span>&gt;</span><br>            底部<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">footer</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>min-width 设置最小宽度</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>最小宽度<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        *&#123;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.head_out</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span><br><span class="language-css">            <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">4px</span> solid <span class="hljs-number">#5ab3f4</span>;</span><br><span class="language-css">            <span class="hljs-attribute">min-width</span>: <span class="hljs-number">1000px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.head</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">1000px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>:<span class="hljs-number">0</span> auto;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#ffa000</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-comment">&lt;!--</span><br><span class="hljs-comment">    案例中，当浏览器缩小窗口，生成横向滚动条的时候，</span><br><span class="hljs-comment">    head_out  width：100%的宽度  是屏幕的宽度，当滑动横向滚动条的时候，这个元素的宽度没有达到主要内容1000px的要求</span><br><span class="hljs-comment">    所以可以给head_out设置最小宽度  min-width</span><br><span class="hljs-comment">--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;head_out&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;head&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>最大宽度和最大高度</p>
<p>宽度：width min-width max-width</p>
<p>高度：height min-height max-height</p>
<p>当3个冲突后怎么办：</p>
<ul>
<li><p>当min-width和max-width 冲突的时候，min-width是优先的</p>
</li>
<li><p>当width和 min或max冲突以后，min或者max直接无视width的存在（无论是否添加 ！important）</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Title<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">            <span class="hljs-attribute">min-width</span>: <span class="hljs-number">800px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">max-width</span>: <span class="hljs-number">700px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">400px</span> <span class="hljs-meta">!important</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h3 id="css-hack"><a href="#css-hack" class="headerlink" title="css hack"></a>css hack</h3><ul>
<li>由于不同的厂商的浏览器，或者是同一个浏览器不同的版本（ie），对css的解析和认识不完全一样,可能会导致不同浏览器显示的效果不相同,那么我们需要针对某个浏览器，去写不同的样式，让代码能够兼容所有的浏览器</li>
<li>比如:</li>
</ul>
<p>​		after伪元素清浮动，只有ie8及以上支持，所以要针对ie6、7书写一个开启haslayout</p>
<p>​		*代表ie6,7 zoom代表开启haslayout 所以可以书写 *zoom：1；</p>
<p>​		那么这个代码只有ie 6 7 认识</p>
<ul>
<li><p>为什么使用css hack</p>
<p>第一种理解：让我们css 的代码兼容不同的浏览器</p>
<p>第二种理解：我们可以为不同的浏览器定制不同的样式</p>
</li>
<li><p>css hack有3种表现方式：</p>
<ol>
<li><p>css属性前缀法 2、选择器前缀法 3、IE条件注释法</p>
<ul>
<li><p>ie条件注释法</p>
<p>主要针对ie的版本</p>
<figure class="highlight crmsh"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs crmsh"><span class="hljs-keyword">gt</span> ：大于<br> <span class="hljs-keyword">lt</span>：小于<br> <span class="hljs-keyword">gte</span>：大于等于<br> <span class="hljs-keyword">lte</span>：小于等于<br> ！：非当前<br> 目前条件注释只支持到ie9及以下  其他浏览器不支持条件注释<br></code></pre></td></tr></table></figure>
</li>
<li><p>css属性前缀法</p>
<figure class="highlight dos"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs dos">*<span class="hljs-built_in">color</span>：ie <span class="hljs-number">5</span>,<span class="hljs-number">6</span>,<span class="hljs-number">7</span><br>+<span class="hljs-built_in">color</span>：ie <span class="hljs-number">5</span>,<span class="hljs-number">6</span>,<span class="hljs-number">7</span><br>#<span class="hljs-built_in">color</span>：ie <span class="hljs-number">5</span>,<span class="hljs-number">6</span>,<span class="hljs-number">7</span><br>-<span class="hljs-built_in">color</span>：ie <span class="hljs-number">5</span>、<span class="hljs-number">6</span><br><span class="hljs-built_in">color</span>\<span class="hljs-number">0</span>:ie <span class="hljs-number">9</span> <span class="hljs-number">10</span> <span class="hljs-number">11</span><br><span class="hljs-built_in">color</span>\<span class="hljs-number">9</span>:ie <span class="hljs-number">6</span> <span class="hljs-number">7</span> <span class="hljs-number">8</span> <span class="hljs-number">9</span> <span class="hljs-number">10</span><br><span class="hljs-built_in">color</span>\<span class="hljs-number">9</span>\<span class="hljs-number">0</span>:ie <span class="hljs-number">8</span> <span class="hljs-number">9</span> <span class="hljs-number">10</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>选择器前缀法</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css">将前缀写在选择器前边，控制选择器是否针对当前浏览器有效<br>*<span class="hljs-selector-tag">html</span>  ie <span class="hljs-number">5</span> <span class="hljs-number">6</span><br>*+<span class="hljs-selector-tag">html</span> ie7<br><span class="hljs-selector-pseudo">:root</span>  ie9 <span class="hljs-number">10</span> <span class="hljs-number">11</span><br></code></pre></td></tr></table></figure></li>
</ul>
</li>
</ol>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>css hack<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.clearFix</span>&#123;</span><br><span class="language-css">            *zoom:<span class="hljs-number">1</span>;</span><br><span class="language-css">            <span class="hljs-attribute">color</span>\<span class="hljs-number">0</span>\<span class="hljs-number">9</span>:yellow;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        *<span class="hljs-selector-tag">html</span> <span class="hljs-selector-class">.clearFix</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">1000px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.clearFix</span><span class="hljs-selector-pseudo">:after</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">content</span>: <span class="hljs-string">&quot;\200B&quot;</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">display</span>: block;</span><br><span class="language-css">            <span class="hljs-attribute">clear</span>: both;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br>    <span class="hljs-comment">&lt;!--[if IE]&gt;</span><br><span class="hljs-comment">        &lt;style&gt;</span><br><span class="hljs-comment">            .clearFix&#123;</span><br><span class="hljs-comment">                background-color: pink;</span><br><span class="hljs-comment">                width: 100px;</span><br><span class="hljs-comment">                height: 100px;</span><br><span class="hljs-comment">            &#125;</span><br><span class="hljs-comment">        &lt;/style&gt;</span><br><span class="hljs-comment">    &lt;![endif]--&gt;</span><br><br>    <span class="hljs-comment">&lt;!--[if lt IE 7]&gt;</span><br><span class="hljs-comment">    &lt;style&gt;</span><br><span class="hljs-comment">        .clearFix&#123;</span><br><span class="hljs-comment">            background-color: green;</span><br><span class="hljs-comment">            width: 100px;</span><br><span class="hljs-comment">            height: 100px;</span><br><span class="hljs-comment">        &#125;</span><br><span class="hljs-comment">    &lt;/style&gt;</span><br><span class="hljs-comment">    &lt;![endif]--&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;clearFix&quot;</span>&gt;</span><br>    今天天气真好<br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="BFC-块级格式化上下文"><a href="#BFC-块级格式化上下文" class="headerlink" title="BFC(块级格式化上下文)"></a>BFC(块级格式化上下文)</h3><p>它是页面 <code>CSS</code> 视觉渲染的一部分，<strong>用于决定块级盒的布局及浮动相互影响范围的一个区域</strong>。</p>
<h4 id="BFC的创建"><a href="#BFC的创建" class="headerlink" title="BFC的创建"></a>BFC的创建</h4><p>以下元素会创建BFC:</p>
<ul>
<li>根元素（<code>html</code>）</li>
<li>浮动元素（<code>float</code> 不为 <code>none</code>）</li>
<li>绝对固定定位元素（<code>position</code> 为 <code>absolute</code> 或 <code>fixed</code>）</li>
<li>表格的标题和单元格（<code>display</code> 为 <code>table-caption</code>，<code>table-cell</code>）</li>
<li>匿名表格单元格元素（<code>display</code> 为 <code>table</code> 或 <code>inline-table</code>）</li>
<li>行内块元素（<code>display</code> 为 <code>inline-block</code>）</li>
<li><code>overflow</code> 的值不为 <code>visible</code> 的元素</li>
</ul>
<h4 id="BFC的范围"><a href="#BFC的范围" class="headerlink" title="BFC的范围"></a>BFC的范围</h4><ul>
<li>直译过来就是, <code>BFC</code>包含创建它的元素的所有子元素, 但不包括创建了新<code>BFC</code>的子元素的内部元素</li>
<li>简单来说，子元素如果又创建了一个新的 <code>BFC</code>，那么它里面的内容就不属于上一个 <code>BFC</code> 了，这体现了 <code>BFC</code> <strong>隔离</strong> 的思想</li>
<li>也就是所说，<strong>一个元素不能同时存在于两个 BFC 中</strong>。</li>
</ul>
<h4 id="BFC的特性"><a href="#BFC的特性" class="headerlink" title="BFC的特性"></a>BFC的特性</h4><p><code>BFC</code> 除了会创建一个隔离的空间外，还具有以下特性：</p>
<ul>
<li><p><code>BFC</code> 内部的块级盒会在垂直方向上一个接一个排列</p>
</li>
<li><p>同一<code>BFC</code>下的相邻块级元素可能发生外边距折叠，创建新的<code>BFC</code>可以避免外边距折叠</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">    <span class="hljs-selector-class">.top</span> &#123;</span><br><span class="language-css">      <span class="hljs-attribute">height</span>: <span class="hljs-number">50px</span>;</span><br><span class="language-css">      <span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span> <span class="hljs-number">0</span>;</span><br><span class="language-css">      <span class="hljs-attribute">background</span>: yellow;</span><br><span class="language-css">    &#125;</span><br><span class="language-css"></span><br><span class="language-css">    <span class="hljs-selector-class">.outer</span> &#123;</span><br><span class="language-css">      <span class="hljs-attribute">background</span>: gray;</span><br><span class="language-css">      <span class="hljs-attribute">height</span>: <span class="hljs-number">50px</span>;</span><br><span class="language-css">      <span class="hljs-comment">/* 创建新的 BFC 就可以避免这两个相邻块级盒间的外边距折叠，尝试去掉注释后看效果 */</span></span><br><span class="language-css">      <span class="hljs-comment">/* overflow: auto; */</span></span><br><span class="language-css">    &#125;</span><br><span class="language-css"></span><br><span class="language-css">    <span class="hljs-selector-class">.inner</span> &#123;</span><br><span class="language-css">      <span class="hljs-attribute">height</span>: <span class="hljs-number">20px</span>;</span><br><span class="language-css">      <span class="hljs-attribute">margin</span>: <span class="hljs-number">10px</span> <span class="hljs-number">0</span>; <span class="hljs-comment">/* 这里设置了inner box的 margin，很明显没有生效 */</span></span><br><span class="language-css">      <span class="hljs-attribute">background</span>: green;</span><br><span class="language-css">    &#125;</span><br><span class="language-css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;top&quot;</span>&gt;</span>TOP<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;inner&quot;</span>&gt;</span>INNER<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>每个元素的外边距盒（margin box）的左边与包含块边框盒（border box）的左边相接触（从右向左的格式化，则相反），即使存在浮动也是如此</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">    <span class="hljs-selector-class">.box</span> &#123;</span><br><span class="language-css">      <span class="hljs-attribute">background</span>: gray;</span><br><span class="language-css">    &#125;</span><br><span class="language-css"></span><br><span class="language-css">    <span class="hljs-selector-class">.left</span> &#123;</span><br><span class="language-css">      <span class="hljs-comment">/* 即使存在浮动元素，BFC中其他元素的margin box的左边也会与包含块border box的左边相接触 */</span></span><br><span class="language-css">      <span class="hljs-comment">/* 在这个例子中，黄框向左浮动，脱离了普通流，此时绿框被定位到包含块的左上角 */</span></span><br><span class="language-css">      <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">      <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">      <span class="hljs-attribute">height</span>: <span class="hljs-number">80px</span>;</span><br><span class="language-css">      <span class="hljs-attribute">background</span>: yellow;</span><br><span class="language-css">      <span class="hljs-attribute">opacity</span>: .<span class="hljs-number">5</span>;</span><br><span class="language-css">    &#125;</span><br><span class="language-css"></span><br><span class="language-css">    <span class="hljs-selector-class">.right</span> &#123;</span><br><span class="language-css">      <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">      <span class="hljs-attribute">height</span>: <span class="hljs-number">50px</span>;</span><br><span class="language-css">      <span class="hljs-attribute">background</span>: green;</span><br><span class="language-css">      <span class="hljs-attribute">opacity</span>: .<span class="hljs-number">5</span>;</span><br><span class="language-css">    &#125;</span><br><span class="language-css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&#x27;box&#x27;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>浮动盒的区域不会和<code>BFC</code>重叠</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">    <span class="hljs-selector-class">.wrapper</span> &#123;</span><br><span class="language-css">      <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">      <span class="hljs-attribute">background</span>: gray;</span><br><span class="language-css">    &#125;</span><br><span class="language-css"></span><br><span class="language-css">    <span class="hljs-selector-class">.float</span> &#123;</span><br><span class="language-css">      <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">      <span class="hljs-attribute">width</span>: <span class="hljs-number">80px</span>;</span><br><span class="language-css">      <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">      <span class="hljs-attribute">background</span>: green;</span><br><span class="language-css">      <span class="hljs-attribute">opacity</span>: .<span class="hljs-number">6</span>;</span><br><span class="language-css">    &#125;</span><br><span class="language-css"></span><br><span class="language-css">    <span class="hljs-selector-class">.bfc</span> &#123;</span><br><span class="language-css">      <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">      <span class="hljs-attribute">height</span>: <span class="hljs-number">50px</span>;</span><br><span class="language-css">      <span class="hljs-attribute">background</span>: yellow;</span><br><span class="language-css">      <span class="hljs-comment">/* 如果不创建 BFC，浮动盒的区域会和黄框重叠 */</span></span><br><span class="language-css">      <span class="hljs-comment">/* 尝试去掉 overflow 注释，使黄框创建 BFC，观察 BFC 区域和浮动盒的重叠情况 */</span></span><br><span class="language-css">      <span class="hljs-attribute">overflow</span>: hidden; </span><br><span class="language-css">    &#125;</span><br><span class="language-css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;wrapper&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;float&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;bfc&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>计算<code>BFC</code>的高度时，浮动元素也会参与计算</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">    <span class="hljs-selector-class">.bfc</span> &#123;</span><br><span class="language-css">      <span class="hljs-comment">/* 计算 BFC 高度时，包含 BFC 内所有元素，即使是浮动元素也会参与计算 */</span></span><br><span class="language-css">      <span class="hljs-comment">/* 这一特性可以用来解决浮动元素导致的高度塌陷 */</span></span><br><span class="language-css">      <span class="hljs-comment">/* 如果父元素没有创建 BFC，在计算高度时，浮动元素不会参与计算，此时就会出现高度塌陷 */</span></span><br><span class="language-css">      <span class="hljs-attribute">overflow</span>: auto;</span><br><span class="language-css">      <span class="hljs-attribute">background</span>: gray;</span><br><span class="language-css">    &#125;</span><br><span class="language-css"></span><br><span class="language-css">    <span class="hljs-selector-class">.float</span> &#123;</span><br><span class="language-css">      <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">      <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">      <span class="hljs-attribute">height</span>: <span class="hljs-number">80px</span>;</span><br><span class="language-css">      <span class="hljs-attribute">background</span>: green;</span><br><span class="language-css">    &#125;</span><br><span class="language-css"></span><br><span class="language-css">    <span class="hljs-selector-class">.inner</span> &#123;</span><br><span class="language-css">      <span class="hljs-attribute">height</span>: <span class="hljs-number">50px</span>;</span><br><span class="language-css">      <span class="hljs-attribute">background</span>: yellow;</span><br><span class="language-css">    &#125;</span><br><span class="language-css"></span><br><span class="language-css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;bfc&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;float&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;inner&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure></li>
</ul>
<h4 id="BFC的应用"><a href="#BFC的应用" class="headerlink" title="BFC的应用"></a>BFC的应用</h4><ul>
<li><p>自适应多栏布局</p>
<p>中间栏创建 <code>BFC</code>，左右栏宽度固定后浮动。由于盒子的 margin box 的左边和包含块 border box 的左边相接触，同时浮动盒的区域不会和 <code>BFC</code> 重叠，所以中间栏的宽度会自适应</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">    <span class="hljs-selector-class">.wrapper</span> <span class="hljs-selector-tag">div</span> &#123;</span><br><span class="language-css">      <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">    &#125;</span><br><span class="language-css"></span><br><span class="language-css">    <span class="hljs-selector-class">.left</span> &#123;</span><br><span class="language-css">      <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">      <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">      <span class="hljs-attribute">background</span>: gray;</span><br><span class="language-css">    &#125;</span><br><span class="language-css"></span><br><span class="language-css">    <span class="hljs-selector-class">.right</span> &#123;</span><br><span class="language-css">      <span class="hljs-attribute">float</span>: right;</span><br><span class="language-css">      <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">      <span class="hljs-attribute">background</span>: gray;</span><br><span class="language-css">    &#125;</span><br><span class="language-css"></span><br><span class="language-css">    <span class="hljs-selector-class">.main</span> &#123;</span><br><span class="language-css">      <span class="hljs-comment">/* 中间栏创建 BFC */</span></span><br><span class="language-css">      <span class="hljs-comment">/* 由于 盒子的 margin box 的左边和包含块 border box 的左边相接触 */</span></span><br><span class="language-css">      <span class="hljs-comment">/* 同时 BFC 区域不会和浮动盒重叠，所以宽度会自适应 */</span></span><br><span class="language-css">      <span class="hljs-attribute">overflow</span>: auto;</span><br><span class="language-css">      <span class="hljs-attribute">background</span>: cyan;</span><br><span class="language-css">    &#125;</span><br><span class="language-css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;wrapper&quot;</span>&gt;</span><br>   <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>   <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>   <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;main&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>
</li>
<li><p>防止外边距折叠</p>
<p>创建新的 <code>BFC</code> ，让相邻的块级盒位于不同 <code>BFC</code> 下可以防止外边距折叠</p>
</li>
<li><p>清除浮动</p>
<p><code>BFC</code> 内部的浮动元素也会参与高度计算，可以清除 <code>BFC</code> 内部的浮动</p>
</li>
</ul>
<h4 id="IFC的应用"><a href="#IFC的应用" class="headerlink" title="IFC的应用"></a>IFC的应用</h4><ul>
<li>在一个行内格式化上下文中，盒是一个接一个<strong>水平</strong>放置的，从包含块的顶部开始</li>
<li>这些盒之间的<strong>水平</strong><code>margin</code>，<code>border</code>和<code>padding</code>都有效</li>
<li>盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐</li>
</ul>
<h3 id="空元素和替换元素"><a href="#空元素和替换元素" class="headerlink" title="空元素和替换元素"></a>空元素和替换元素</h3><h4 id="空元素"><a href="#空元素" class="headerlink" title="空元素"></a>空元素</h4><ul>
<li><p>在html中 ，一个不可能存在子节点（注释节点，文本节点，元素节点）的元素就叫做空元素</p>
</li>
<li><p>通常在空元素上使用 闭合标签 是无效的</p>
<p><code>&lt;input type=&quot;text&quot;&gt;&lt;/input&gt;</code> ：闭合标签无效</p>
<p>br、hr、img、input、link、meta、source</p>
</li>
</ul>
<h4 id="替换元素"><a href="#替换元素" class="headerlink" title="替换元素"></a>替换元素</h4><ul>
<li>浏览器根据元素的标签和属性，来决定元素具体显示的内容</li>
<li>img、input、textarea、select、video、iframe是替换元素</li>
<li>audio、canvas标签在某些时候也是替换元素</li>
</ul>
<h3 id="calc方法"><a href="#calc方法" class="headerlink" title="calc方法"></a>calc方法</h3><ul>
<li><p>calc()函数</p>
<p>我们可以把它当做一个函数，其实他是calculate（计算）缩写。</p>
<p>是css3提供的一个新功能，主要用来计算长度</p>
<p>我们可以用它来给padding margin width height font-size等等计算大小值 值是一个动态的</p>
</li>
<li><p>注意</p>
<p>使用+ - * &#x2F;进行运算</p>
<p>可以使用百分比 px em rem等单位</p>
<p>可以单位混合计算</p>
<p>在使用的时候，尽量在 + - * &#x2F; 前后添加一个空格</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>calc方法<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        *&#123;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">100%</span> - <span class="hljs-number">200px</span>);</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">100px</span> / <span class="hljs-number">2</span> + <span class="hljs-number">100px</span>);</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-comment">&lt;!--书写一个效果，让div永远距离两边都是100px</span><br><span class="hljs-comment">    计算div的宽度--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure></li>
</ul>
<h2 id="常见布局"><a href="#常见布局" class="headerlink" title="常见布局"></a>常见布局</h2><h3 id="粘黏布局"><a href="#粘黏布局" class="headerlink" title="粘黏布局"></a>粘黏布局</h3><ul>
<li>又称作 stick footer布局</li>
<li>如果页面不够长的话 footer粘在视窗的底部</li>
<li>如果页面内容长度超出，footer就会被页面向下推送出去</li>
</ul>
<h4 id="方法1"><a href="#方法1" class="headerlink" title="方法1:"></a>方法1:</h4><ul>
<li><p>给inner最小高度是 100%</p>
</li>
<li><p>让footer给margin-top：-50px (自身高度)上去 （main元素和footer重叠）</p>
</li>
<li><p>给main元素一个padding-bottom 50px 就算重叠 文字也显示不到padding中</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>粘连布局<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width,initial-scale=1&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        *&#123;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-tag">html</span>,<span class="hljs-selector-tag">body</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.inner</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">min-height</span>: <span class="hljs-number">100%</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.main</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">50px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-tag">footer</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">50px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#5ab3f4</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin-top</span>: -<span class="hljs-number">50px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;inner&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;main&quot;</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span>   <br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">footer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">footer</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure></li>
</ul>
<h4 id="方法2"><a href="#方法2" class="headerlink" title="方法2:"></a>方法2:</h4><ul>
<li><p>给inner设置最小高度是100%</p>
</li>
<li><p>给inner设置padding-bottom是50px</p>
</li>
<li><p>给inner设置为 怪异盒子模型：box-sizing：border-box</p>
</li>
<li><p>让footer 的margin-top为负 上来</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>粘连布局<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width,initial-scale=1&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        *&#123;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-tag">html</span>,<span class="hljs-selector-tag">body</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.inner</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">min-height</span>: <span class="hljs-number">100%</span>;</span><br><span class="language-css">            <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">50px</span>;</span><br><span class="language-css">            <span class="hljs-comment">/*设置为怪异盒子模型的方式：</span></span><br><span class="hljs-comment"><span class="language-css">            高度就包含了padding  总共加起来是百分百  并且main不会显示在inner的padding中*/</span></span><br><span class="language-css">            <span class="hljs-attribute">box-sizing</span>: border-box;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.main</span>&#123;</span><br><span class="language-css"></span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-tag">footer</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">50px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#5ab3f4</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">margin-top</span>: -<span class="hljs-number">50px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;inner&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;main&quot;</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">footer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">footer</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure></li>
</ul>
<h4 id="方法3"><a href="#方法3" class="headerlink" title="方法3:"></a>方法3:</h4><ul>
<li><p>直接计算inner的最小高度是 100% - 50px</p>
</li>
<li><p>footer在main元素小的时候，刚好跟着inner 在最下边。否则就被inner撑下去</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>粘连布局<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width,initial-scale=1&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        *&#123;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-tag">html</span>,<span class="hljs-selector-tag">body</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.inner</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">min-height</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">100%</span> - <span class="hljs-number">50px</span>);</span><br><span class="language-css">            <span class="hljs-comment">/*padding-bottom: 50px;*/</span></span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.main</span>&#123;</span><br><span class="language-css"></span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-tag">footer</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">50px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#5ab3f4</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-comment">/*margin-top: -50px;*/</span></span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;inner&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;main&quot;</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>                main区域 <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">footer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">footer</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure></li>
</ul>
<h3 id="水平垂直居中"><a href="#水平垂直居中" class="headerlink" title="水平垂直居中"></a>水平垂直居中</h3><h4 id="方法1-1"><a href="#方法1-1" class="headerlink" title="方法1:"></a>方法1:</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>01.水平垂直居中方法1<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">700px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">500px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">40px</span> auto;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.con</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#009ff2</span>;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">            <span class="hljs-comment">/*left: 50%;*/</span></span><br><span class="language-css">            <span class="hljs-comment">/*在已知被居中元素的宽高的时候：</span></span><br><span class="hljs-comment"><span class="language-css">                在定位的时候，直接使用calc方法 计算left的百分之50 减去自身的宽度</span></span><br><span class="hljs-comment"><span class="language-css">                一次性定位结束*/</span></span><br><span class="language-css">            <span class="hljs-attribute">left</span>:<span class="hljs-built_in">calc</span>(<span class="hljs-number">50%</span> - <span class="hljs-number">150px</span>);</span><br><span class="language-css">            <span class="hljs-attribute">top</span>:<span class="hljs-built_in">calc</span>(<span class="hljs-number">50%</span> - <span class="hljs-number">100px</span>);</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;con&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="方法2-1"><a href="#方法2-1" class="headerlink" title="方法2:"></a>方法2:</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>01.水平垂直居中方法1<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">700px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">500px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">40px</span> auto;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.con</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#009ff2</span>;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">            <span class="hljs-comment">/*left: 50%;*/</span></span><br><span class="language-css">            <span class="hljs-comment">/*在已知被居中元素的宽高的时候：</span></span><br><span class="hljs-comment"><span class="language-css">                在定位的时候，定位设置50%   里边元素的左上角在容器的正中心，需要将元素向左和上 移动自身的一半 达到居中</span></span><br><span class="hljs-comment"><span class="language-css">                使用margin负值 将元素移动（需要自己算出来一半是多少）</span></span><br><span class="hljs-comment"><span class="language-css">            */</span></span><br><span class="language-css">            <span class="hljs-attribute">left</span>:<span class="hljs-number">50%</span>;</span><br><span class="language-css">            <span class="hljs-attribute">top</span>:<span class="hljs-number">50%</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin-left</span>: -<span class="hljs-number">150px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin-top</span>: -<span class="hljs-number">100px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;con&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="方法3-1"><a href="#方法3-1" class="headerlink" title="方法3:"></a>方法3:</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>水平垂直居中方法3<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">700px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">500px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">40px</span> auto;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.con</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#009ff2</span>;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">            <span class="hljs-comment">/*left: 50%;*/</span></span><br><span class="language-css">            <span class="hljs-comment">/*在不知道被居中元素的宽高的时候：</span></span><br><span class="hljs-comment"><span class="language-css">                在定位的时候，定位设置50%   里边元素的左上角在容器的正中心，需要将元素向左和上 移动自身的一半 达到居中</span></span><br><span class="hljs-comment"><span class="language-css">               使用变形transform属性里的位移值 translate  translate的百分比是参考自身宽高的，所有不需要知道元素宽高即可</span></span><br><span class="hljs-comment"><span class="language-css">            */</span></span><br><span class="language-css">            <span class="hljs-attribute">left</span>:<span class="hljs-number">50%</span>;</span><br><span class="language-css">            <span class="hljs-attribute">top</span>:<span class="hljs-number">50%</span>;</span><br><span class="language-css">            <span class="hljs-comment">/*transform是变形的属性，里边包含一个位移的值， 百分比是相对自身宽度的*/</span></span><br><span class="language-css">            <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translate</span>(-<span class="hljs-number">50%</span>,-<span class="hljs-number">50%</span>);</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;con&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="方法4"><a href="#方法4" class="headerlink" title="方法4:"></a>方法4:</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>水平垂直居中方法4<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">700px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">500px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">40px</span> auto;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.con</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#009ff2</span>;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">            <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">bottom</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">right</span>: <span class="hljs-number">0</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: auto;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;con&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="三列布局"><a href="#三列布局" class="headerlink" title="三列布局:"></a>三列布局:</h3><h4 id="全浮动方法"><a href="#全浮动方法" class="headerlink" title="全浮动方法:"></a>全浮动方法:</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>06.三列布局-全浮动方法<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&#123;</span><br><span class="language-css"></span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.left</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.center</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-built_in">calc</span>(<span class="hljs-number">100%</span> - <span class="hljs-number">200px</span>);</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#009ff2</span>;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.right</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-comment">&lt;!--</span><br><span class="hljs-comment">    方法一：全浮动，使用calc设置宽度</span><br><span class="hljs-comment">        不推荐使用calc   兼容不好</span><br><span class="hljs-comment">        并且center不是优先加载</span><br><span class="hljs-comment">--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;center&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="浮动方法"><a href="#浮动方法" class="headerlink" title="浮动方法:"></a>浮动方法:</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>06.三列布局-全浮动方法<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&#123;</span><br><span class="language-css"></span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.left</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.right</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: right;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.center</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#009ff2</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> <span class="hljs-number">100px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-comment">&lt;!--</span><br><span class="hljs-comment">    方法二：left和right浮动，center不设置宽度</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">        center必须写在最后，center不是优先加载</span><br><span class="hljs-comment">--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;center&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="等高布局"><a href="#等高布局" class="headerlink" title="等高布局:"></a>等高布局:</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>等高布局<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.left</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">10000px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin-bottom</span>: -<span class="hljs-number">10000px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.right</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: right;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">10000px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin-bottom</span>: -<span class="hljs-number">10000px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.center</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#009ff2</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">10000px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin-bottom</span>: -<span class="hljs-number">10000px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-comment">&lt;!--</span><br><span class="hljs-comment">        等高布局：</span><br><span class="hljs-comment">            将元素padding-bottom设置很大一个值，</span><br><span class="hljs-comment">            然后给父级设置overflow：hidden</span><br><span class="hljs-comment">            给元素设置margin-bottom-很大的值，当小到一定程度，父级就是由其他元素撑开</span><br><span class="hljs-comment">    --&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span><br>            left <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            left <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            left <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            left <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            left <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            left <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            left <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span><br>            right <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;center&quot;</span>&gt;</span><br>            center <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            center <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>            center <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="圣杯布局"><a href="#圣杯布局" class="headerlink" title="圣杯布局:"></a>圣杯布局:</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>06.三列布局-圣杯方法<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.out</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: auto;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> <span class="hljs-number">100px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.center</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">10000px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin-bottom</span>: -<span class="hljs-number">10000px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.left</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#009ff2</span>;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">            <span class="hljs-attribute">margin-left</span>: -<span class="hljs-number">100%</span>;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="language-css">            <span class="hljs-attribute">left</span>: -<span class="hljs-number">100px</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">10000px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin-bottom</span>: -<span class="hljs-number">10000px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.right</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#0ee69c</span>;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">margin-left</span>: -<span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="language-css">            <span class="hljs-attribute">right</span>: -<span class="hljs-number">100px</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">10000px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin-bottom</span>: -<span class="hljs-number">10000px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-comment">&lt;!--</span><br><span class="hljs-comment">    保证center优先加载，所有center放在第一个</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">    内容足够小的时候，内容会换行</span><br><span class="hljs-comment">--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;out&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;center&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="双飞翼布局"><a href="#双飞翼布局" class="headerlink" title="双飞翼布局:"></a>双飞翼布局:</h4><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>06.三列布局-双飞翼方法<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.main</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.center</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-comment">/*height: 100px;*/</span></span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">10000px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin-bottom</span>: -<span class="hljs-number">10000px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.left</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-comment">/*height: 100px;*/</span></span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">            <span class="hljs-attribute">margin-left</span>: -<span class="hljs-number">100%</span>;</span><br><span class="language-css">            <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">10000px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin-bottom</span>: -<span class="hljs-number">10000px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.right</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-comment">/*height: 100px;*/</span></span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#009ff2</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin-left</span>: -<span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">10000px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">margin-bottom</span>: -<span class="hljs-number">10000px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-comment">&lt;!--</span><br><span class="hljs-comment">    1.给center添加一个父级main（main全屏，center添加两边的margin），让main和left right进行排列</span><br><span class="hljs-comment">    2.给left margin-left -100%  直接到位  ，  right margin-left:-100px  也直接到位</span><br><span class="hljs-comment">--&gt;</span><br><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;main&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;center&quot;</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> center<br>                <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> center<br>                <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> center<br>                <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> center<br>                <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> center<br>                <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> center<br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;left&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> center<br>            <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> center<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;right&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> center<br>            <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span> center<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h1 id="HTML5"><a href="#HTML5" class="headerlink" title="HTML5"></a>HTML5</h1><h2 id="HTML5新标签"><a href="#HTML5新标签" class="headerlink" title="HTML5新标签:"></a>HTML5新标签:</h2><h3 id="html标签的语义化"><a href="#html标签的语义化" class="headerlink" title="html标签的语义化:"></a>html标签的语义化:</h3><ul>
<li>语义化标签更具有可读性，便于团队的开发和维护</li>
<li>没有css的情况下，网页也能很好的呈现出内容结构和代码结构</li>
<li>关于SEO，搜索引擎更能理解到网页中各部分之间的关系，更准确更快速搜索信息</li>
</ul>
<h3 id="header标签"><a href="#header标签" class="headerlink" title="header标签:"></a>header标签:</h3><ol>
<li><p>用来定义文档（网页或者是某一个段落）的页眉（头部）</p>
</li>
<li><p>可能包含一些标题元素，也可能包含其他元素，比如logo、搜索框、作者信息等等</p>
</li>
<li><p><code>&lt;header&gt;</code> 元素不是分段内容，而是属于独立分块的头部.因此不会往 大纲 中引入新的段落。也就是说，<code>&lt;header&gt;</code> 元素通常用于包含周围部分的标题（h1 至 h6 元素），但这不是必需的。</p>
</li>
<li><p>完成的网页或者是完整的块（网页的一个独立区域）是头部、内容、 尾部组成的（并不是强制）</p>
</li>
<li><p>整个页面没有header限制个数，可以使用多个</p>
</li>
<li><p><code>&lt;header&gt;</code> 元素不能作为 <code>&lt;address&gt;</code>、<code>&lt;footer&gt;</code> 或另一个 <code>&lt;header&gt;</code> 元素的子元素。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>header标签<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--头部区域--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">header</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>你看我像不像logo<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">nav</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>news<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>my<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--内容区域--&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure></li>
</ol>
<h3 id="footer标签"><a href="#footer标签" class="headerlink" title="footer标签"></a>footer标签</h3><ol>
<li>footer标签代表一个网页或者章节内容的底部区域（页脚）</li>
<li>footer通常包含章节的作者，版权数据和文章的其他链接</li>
<li>其他和header同理，比如不是独立的区域，应该是隶属于一个章节或者是网页</li>
<li><code>&lt;footer&gt;</code> 元素不能作为 <code>&lt;address&gt;</code>、<code>&lt;header&gt;</code> 或另一个 <code>&lt;footer&gt;</code> 元素的子元素。</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>footer<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--头部区域--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">header</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>你看我像不像logo<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">nav</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>news<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>my<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--内容区域--&gt;</span><br><br>        <span class="hljs-comment">&lt;!--底部区域--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">footer</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>友情链接<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>百度<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>阿里巴巴<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>阿里妈妈<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">footer</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="nav标签"><a href="#nav标签" class="headerlink" title="nav标签"></a>nav标签</h3><ol>
<li><p><code>&lt;nav&gt;</code>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。</p>
</li>
<li><p>导航部分的常见示例是菜单，目录和索引</p>
</li>
<li><p>并不是所有的导航都需要用nav标签，只是当前页面中比较重要的热门的可以使用nav，比如在底部导航，就没有必要加入链接</p>
</li>
<li><p>一个网页可能会有多个导航，比如整个网页的导航，也可以是某一块区域的导航</p>
</li>
</ol>
<blockquote>
<p>注意nav使用有两种方法:</p>
</blockquote>
<ol>
<li>当nav中的导航列表是静态的：nav中直接嵌套a标签使用即可</li>
<li>当nav中的导航是动态的（需要滑动查看更多，主要出现在移动端）：nav中最好嵌套ul&gt;li&gt;a标签</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>nav标签<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--头部区域--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">header</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>你看我像不像logo<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">nav</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>news<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>my<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span><br>            <span class="hljs-comment">&lt;!--</span><br><span class="hljs-comment">            &lt;nav&gt;</span><br><span class="hljs-comment">                &lt;ul&gt;</span><br><span class="hljs-comment">                    &lt;li&gt;&lt;a href=&quot;###&quot;&gt;news&lt;/a&gt;&lt;/li&gt;</span><br><span class="hljs-comment">                    &lt;li&gt;&lt;a href=&quot;###&quot;&gt;news&lt;/a&gt;&lt;/li&gt;</span><br><span class="hljs-comment">                    &lt;li&gt;&lt;a href=&quot;###&quot;&gt;news&lt;/a&gt;&lt;/li&gt;</span><br><span class="hljs-comment">                    &lt;li&gt;&lt;a href=&quot;###&quot;&gt;news&lt;/a&gt;&lt;/li&gt;</span><br><span class="hljs-comment">                    &lt;li&gt;&lt;a href=&quot;###&quot;&gt;news&lt;/a&gt;&lt;/li&gt;</span><br><span class="hljs-comment">                    &lt;li&gt;&lt;a href=&quot;###&quot;&gt;news&lt;/a&gt;&lt;/li&gt;</span><br><span class="hljs-comment">                    &lt;li&gt;&lt;a href=&quot;###&quot;&gt;news&lt;/a&gt;&lt;/li&gt;</span><br><span class="hljs-comment">                    &lt;li&gt;&lt;a href=&quot;###&quot;&gt;news&lt;/a&gt;&lt;/li&gt;</span><br><span class="hljs-comment">                    &lt;li&gt;&lt;a href=&quot;###&quot;&gt;news&lt;/a&gt;&lt;/li&gt;</span><br><span class="hljs-comment">                &lt;/ul&gt;</span><br><span class="hljs-comment">            &lt;/nav&gt;--&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--内容区域--&gt;</span><br><br>        <span class="hljs-comment">&lt;!--底部区域--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">footer</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>友情链接<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>百度<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>阿里巴巴<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>阿里妈妈<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">footer</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="section标签"><a href="#section标签" class="headerlink" title="section标签:"></a>section标签:</h3><ol>
<li>section是html中一个独立的区域（主要针对网页分块），没有其他语义，一般会包含一个独立的标题</li>
<li>假设有一个效果，上边是nav导航栏，导航栏一般对对应一个区域，用来显示这个导航到的内容，这个区域我们就可以使用section</li>
<li>section主要是对网页进行分块，也可以对网页中的某块内容进行分块</li>
<li>通常一个完整的section是有标题和内容组成的，不推荐给没有标题的区域设置section</li>
<li>如果想要给一个内容设置有个容器用来书写样式，那么还是推荐使用div</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>section标签<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--头部区域--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">header</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>你看我像不像logo<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">nav</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>news<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>my<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--内容区域--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">section</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是section元素的头部啊啊啊啊啊<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--底部区域--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">footer</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>友情链接<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>百度<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>阿里巴巴<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>阿里妈妈<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">footer</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="article标签"><a href="#article标签" class="headerlink" title="article标签"></a>article标签</h3><ol>
<li>代表文档、页面、或程序中，可以独立的完整的被外部引用的内容</li>
<li>比如一篇博客、一篇文章、一段用户的评论、一个日历插件，或者是其他独立内容</li>
<li>一般来说 一个article也有自己的头部header，或者是footer</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>article<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--头部区域--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">header</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>你看我像不像logo<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">nav</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>news<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>my<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--内容区域--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">section</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>这里是评论区域<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">article</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>评论人：张三<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>今天天气真好<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">article</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">article</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>评论人：李四<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>今天天气真好<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">article</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">article</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>评论人：王五<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>今天天气真好<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">article</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--底部区域--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">footer</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>友情链接<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>百度<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>阿里巴巴<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>阿里妈妈<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">footer</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="div-article-和-section"><a href="#div-article-和-section" class="headerlink" title="div article 和 section"></a>div article 和 section</h3><ul>
<li><strong>article和section</strong><ol>
<li>article元素可以看做是特殊的section，但是强调独立性比section更强</li>
<li>section主要强调分段分块，article是强调很强的独立性</li>
<li>原则上来说能用article的时候，也可以使用section，但是假设用article更合适，请使用article</li>
</ol>
</li>
<li><strong>div、article和section</strong><ol>
<li>div、section、article语义依次递增</li>
<li>div没有任何的语义，仅仅是用作样式，可以用在任何场景，但是我们容易看不清上下文关系</li>
<li>对于主题性的区域，我们可以使用section</li>
<li>加入这个区域可以脱离上下文，作为完整独立的内容存在，使用article</li>
</ol>
</li>
</ul>
<h3 id="aside元素"><a href="#aside元素" class="headerlink" title="aside元素"></a>aside元素</h3><ol>
<li>表示一个和其余页面内容几乎无关的区域</li>
<li>被认为是独立于内容的一部分，并且可以拆出来而不会使整体收到影响，通常表现为侧边栏</li>
<li>这个里边的内容和其他元素内容关联性不强</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>aside元素<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--头部区域--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">header</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>你看我像不像logo<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">nav</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>news<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>my<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>tiyu<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">header</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--内容区域--&gt;</span><br><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-comment">&lt;!-- 主题区域--&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">section</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>这里是评论区域<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">article</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>评论人：张三<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>今天天气真好<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">article</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">article</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>评论人：李四<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>今天天气真好<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">article</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">article</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>评论人：王五<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>                    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>今天天气真好<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>                <span class="hljs-tag">&lt;/<span class="hljs-name">article</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span><br>            <span class="hljs-comment">&lt;!--侧边栏--&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">aside</span>&gt;</span><br>                我是侧边栏内容<br>            <span class="hljs-tag">&lt;/<span class="hljs-name">aside</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><br>        <span class="hljs-comment">&lt;!--底部区域--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">footer</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>友情链接<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>百度<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>阿里巴巴<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;###&quot;</span>&gt;</span>阿里妈妈<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">footer</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="figure元素"><a href="#figure元素" class="headerlink" title="figure元素"></a>figure元素</h3><ol>
<li>代表一块独立的内容，是一个独立的引用单元</li>
<li>这个标签在主文中用来引用 图片、插画、表格、代码段等等信息</li>
<li>一般会在figure元素中插入figcaption元素（标题元素），将figcaption代表的标题与figure内容相关联</li>
<li>如果是单独一张图片 或者 单独的表格等等，那么直接使用相应的标签即可，如果存在图片和标题，那么请使用figure标签</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>figure<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">figure</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">figcaption</span>&gt;</span>海贼王的图片<span class="hljs-tag">&lt;/<span class="hljs-name">figcaption</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;../images/05.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;300&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>





<h3 id="mack元素"><a href="#mack元素" class="headerlink" title="mack元素"></a>mack元素</h3><ol>
<li>为引用的内容进行标记或突出显示文本，用来表示和上下文之间的关联性</li>
<li>突出显示的文本通常可能和用户当前的活动等有一定的关联性</li>
<li>比如，用户搜索的时候，它可以显示搜索之后的关键字</li>
<li>不要把mark和 em、strong进行混淆。em、strong都是表示文本在上下文的重要性，而mark只是为了表示关联性</li>
<li>mark标签是行内标签，默认黄色背景颜色</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>mark元素<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;下雨&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>今天晚上可能会<span class="hljs-tag">&lt;<span class="hljs-name">mark</span>&gt;</span>下雨<span class="hljs-tag">&lt;/<span class="hljs-name">mark</span>&gt;</span>，明天中秋节晴朗<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="time元素"><a href="#time元素" class="headerlink" title="time元素"></a>time元素</h3><ol>
<li>用来表示24小时制 或者是 一个公历时间</li>
<li>作用：以机器可读的格式去表示日期和时间，安排日程表的应用就可以使用这个time标签</li>
<li>通用时间格式 XXXX-XX-XX</li>
<li>两种方法:<ol>
<li>time标签直接包含时间</li>
<li>使用datetime属性来表示时间</li>
</ol>
</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!--内容区域--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-comment">&lt;!-- 主题区域--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">section</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>这里是评论区域<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">article</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>评论人：张三<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>今天天气真好<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">time</span>&gt;</span>2019-9-12 19:00:00<span class="hljs-tag">&lt;/<span class="hljs-name">time</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">article</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">article</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>评论人：李四<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>今天天气真好<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">time</span> <span class="hljs-attr">datetime</span>=<span class="hljs-string">&quot;2019-9-12 18:00:00&quot;</span>&gt;</span>一小时之前<span class="hljs-tag">&lt;/<span class="hljs-name">time</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">article</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">article</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>评论人：王五<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span><br>                <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>今天天气真好<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>            <span class="hljs-tag">&lt;/<span class="hljs-name">article</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">section</span>&gt;</span><br>        <span class="hljs-comment">&lt;!--侧边栏--&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">aside</span>&gt;</span><br>            我是侧边栏内容<br>        <span class="hljs-tag">&lt;/<span class="hljs-name">aside</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="datalist元素"><a href="#datalist元素" class="headerlink" title="datalist元素"></a>datalist元素</h3><ol>
<li>包含了一组option元素，代表是列表可选的值</li>
<li>和input进行相关联，用来配套使用</li>
<li>input中的list属性 &#x3D;&#x3D; datalist的id属性</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>datalist元素<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">list</span>=<span class="hljs-string">&quot;city&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">datalist</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;city&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;河南&quot;</span>&gt;</span>河南<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;河北&quot;</span>&gt;</span>河北<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;湖北&quot;</span>&gt;</span>湖北<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;湖南&quot;</span>&gt;</span>湖南<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;胡建&quot;</span>&gt;</span>胡建<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">datalist</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="progress元素"><a href="#progress元素" class="headerlink" title="progress元素"></a>progress元素</h3><ol>
<li>主要用来显示一项任务的完成程度</li>
<li>规范没有规定默认的样式，所以各个浏览器默认的样式不一定相同</li>
<li>属性:<ol>
<li>value:是当前进度的值</li>
<li>max: 是总进度的长度</li>
</ol>
</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>progress元素<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">progress</span> <span class="hljs-attr">max</span>=<span class="hljs-string">&quot;100&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;80&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">progress</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>





<h2 id="HTML5新表单属性"><a href="#HTML5新表单属性" class="headerlink" title="HTML5新表单属性"></a>HTML5新表单属性</h2><h3 id="表单的新属性规范"><a href="#表单的新属性规范" class="headerlink" title="表单的新属性规范"></a>表单的新属性规范</h3><ol>
<li>h5规范允许 当属性名和属性值相等的时候 可以直接书写属性名即可</li>
<li>在js中，h5允许以布尔值的形式控制属性开启或关闭<ul>
<li>也就是在js中 给autofocus属性设置值为true（真，打开） 或者是 false（假，关闭）</li>
<li>但是在元素的属性中 不允许使用true或者是false来控制开启或关闭</li>
</ul>
</li>
<li>如果多个表单书写autofocus(只能出现一次的属性)，那么以第一个书写的为准</li>
</ol>
<h3 id="表单的新属性"><a href="#表单的新属性" class="headerlink" title="表单的新属性"></a>表单的新属性</h3><ul>
<li>placeholder: 占位符</li>
<li>autocomplete : 是否提示用户曾经输入过的值 默认是on 关闭是off</li>
<li>autofocus: 默认自动获取焦点</li>
<li>required: 必填项,当提交的时候 此表单必须填写</li>
<li>disabled: 禁用任何表单元素,这个元素就被禁止输入或选择等等  (<strong>表单是不会在被提交</strong>)</li>
<li>checked: 单选框或者多选框 默认被选中</li>
<li>readonly: 对于可编辑的表单来说 表示不能再次被编辑 但是可以提交 (<strong>对单选多选按钮不支持</strong>)</li>
<li>form: <ul>
<li>如果input存在form属性，表示当前的input属于某一个表单,此时form表单的id值就是这个input的值, form表单就和当前的input关联了,无论input书写在哪里,都能随着表单发送数据</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>表单元素的新属性<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;###&quot;</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;get&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;form1&quot;</span>&gt;</span><br>    请输入用户名：<br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;user&quot;</span> <span class="hljs-attr">placeholder</span>=<span class="hljs-string">&quot;请输入用户名&quot;</span> <span class="hljs-attr">autofocus</span> <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">&quot;off&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><br>    请输入密码：<br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;pass&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;123456&quot;</span> <span class="hljs-attr">autofocus</span> <span class="hljs-attr">required</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><br>    请确认性别：<br>    男：<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;sex&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;男&quot;</span> <span class="hljs-attr">disabled</span> <span class="hljs-attr">checked</span>&gt;</span><br>    女：<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;sex&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;女&quot;</span> <span class="hljs-attr">disabled</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><br><br>    请确认年龄：<br>    大于30岁：<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;age&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;30-&quot;</span> <span class="hljs-attr">checked</span> <span class="hljs-attr">readonly</span>&gt;</span><br>    小于30岁：<span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;age&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;30+&quot;</span> <span class="hljs-attr">readonly</span>&gt;</span><br><br>    请输入邮箱：<br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;email&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;email&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;lipeihua@atguigu.com&quot;</span> <span class="hljs-attr">readonly</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>提交<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><br><span class="hljs-comment">&lt;!--在form表单外有一个input，但是想点击form中的提交按钮的时候，把这个input也给提交了，form属性就这样使用--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;hidden&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;id&quot;</span> <span class="hljs-attr">form</span>=<span class="hljs-string">&quot;form1&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;12587&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="表单的新类型"><a href="#表单的新类型" class="headerlink" title="表单的新类型"></a>表单的新类型</h3><ul>
<li><p>input：（如果input的新类型不被浏览器所支持，那么他会默认显示成text文本框）</p>
</li>
<li><p>大多数都被谷歌浏览器支持，如果开发移动端，只要谷歌支持即可，因为所有安卓系统内置浏览器都是chrome</p>
</li>
<li><p>type旧类型：</p>
<p>text： 文本框</p>
<p>password： 密码框</p>
<p>radio： 单选框</p>
<p>checkbox： 多选框</p>
<p>hidden： 隐藏域</p>
<p>file： 文件域</p>
<p>button： 按钮</p>
<p>reset： 重置按钮</p>
<p>submit： 提交按钮</p>
</li>
<li><p>type新类型</p>
<ol>
<li><p>color：</p>
<p>用来引入或者打开指定颜色的控件</p>
</li>
<li><p>date：</p>
<p>日期的控件（年月日）</p>
</li>
<li><p>week：</p>
<p>日期的控件（年周）（火狐不支持）</p>
</li>
<li><p>month：</p>
<p>日期的控件（年月）（火狐不支持）</p>
</li>
<li><p>email：</p>
<p>编辑email的字段</p>
<p>自带验证，但是验证不完整，一般还是自己书写</p>
<p>在移动端上 有相对应的自动弹出键盘包含 @ .com 等按键</p>
</li>
<li><p>number：</p>
<p>用来输入数字的控件</p>
<p>多了一个上下的按键，可以增加和降低数字大小</p>
<p>验证必须是数字</p>
<p>其他属性</p>
<ul>
<li>min：最少数量</li>
<li>max：最大数量</li>
<li>value：当前数量</li>
<li>step：每次累加累减数量</li>
</ul>
</li>
<li><p>search：</p>
<p>用来搜索框，当用户输入内容后，在末尾有一个删除按钮，单击可以删除输入好的文字</p>
</li>
<li><p>tel：</p>
<p>电话号码输入框</p>
</li>
<li><p>url：</p>
<p>url地址</p>
</li>
<li><p>range：</p>
<p>输入一个拖拽的控件</p>
<p>属性：</p>
<ul>
<li>max：最大值</li>
<li>min：最小值</li>
<li>step：每次走的最小单位</li>
<li>value：当前值</li>
</ul>
</li>
</ol>
</li>
</ul>
<p>​	</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>新type类型-input<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;###&quot;</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;get&quot;</span>&gt;</span><br>        请选择你喜欢的颜色：<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;color&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;color&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><br>        请选择你的出生日期：<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;date&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;brithday&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><br>        请输入当前的周数：<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;week&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;week&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><br>        请输入你几月生日：<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;month&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;month&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><br>        请输入您的邮箱地址：<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;email&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;email&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><br>        请选择您购买的数量：<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;number&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;num&quot;</span> <span class="hljs-attr">min</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">max</span>=<span class="hljs-string">&quot;10&quot;</span> <span class="hljs-attr">step</span>=<span class="hljs-string">&quot;2&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><br>        请在本框中进行检索：<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;search&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;sear&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><br>        请输入您的电话号码：<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;tel&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;tel&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><br>        请输入你的个人博客的网址：<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;url&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;url&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br><br>        请选择：<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;range&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;range&quot;</span> <span class="hljs-attr">min</span>=<span class="hljs-string">&quot;30&quot;</span> <span class="hljs-attr">max</span>=<span class="hljs-string">&quot;100&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;50&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>提交<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="select元素的新属性"><a href="#select元素的新属性" class="headerlink" title="select元素的新属性"></a>select元素的新属性</h3><ul>
<li>selected： 默认选中项</li>
<li>multiple： 让select可以进行多选（按住ctrl键进行多选）</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>select元素的属性<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;###&quot;</span> <span class="hljs-attr">method</span>=<span class="hljs-string">&quot;get&quot;</span>&gt;</span><br>    请选择你喜欢的食物：<br>    <span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;food&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">multiple</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;肉&quot;</span>&gt;</span>肉<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;鸡蛋&quot;</span>&gt;</span>鸡蛋<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;水果&quot;</span> <span class="hljs-attr">selected</span>&gt;</span>水果<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;骨头&quot;</span>&gt;</span>骨头<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>提交<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="调用相册和摄像头"><a href="#调用相册和摄像头" class="headerlink" title="调用相册和摄像头"></a>调用相册和摄像头</h3><ul>
<li><p>input的file补充：</p>
<p><code>&lt;input type=&quot;file&quot; accept=&quot;image/*&quot; capture=&quot;camera&quot;&gt;</code></p>
<p>文件域 的 accept属性书写 image&#x2F;* 代表接受任何格式的图片</p>
<p>capture&#x3D;camera 代表从相机拍照接收</p>
<p>capture&#x3D;photo 代表从相册选取照片</p>
<p>但是在pc端的表现都是选取文件</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>调用本地相册和相机<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;file&quot;</span> <span class="hljs-attr">accept</span>=<span class="hljs-string">&quot;image/*&quot;</span> <span class="hljs-attr">capture</span>=<span class="hljs-string">&quot;camera&quot;</span>&gt;</span><br><br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;file&quot;</span> <span class="hljs-attr">accept</span>=<span class="hljs-string">&quot;image/*&quot;</span> <span class="hljs-attr">capture</span>=<span class="hljs-string">&quot;photo&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h2 id="音视频"><a href="#音视频" class="headerlink" title="音视频"></a>音视频</h2><h3 id="音视频旧格式"><a href="#音视频旧格式" class="headerlink" title="音视频旧格式"></a>音视频旧格式</h3><ul>
<li><p><code>&lt;object&gt;</code> 标签的作用是在 HTML 页面中嵌入多媒体元素</p>
<p><code>&lt;object data=&quot;1.swf&quot; width=&quot;400&quot;&gt;&lt;/object&gt;</code></p>
</li>
<li><p><code>&lt;embed&gt;</code> 标签的作用是在 HTML 页面中嵌入多媒体元素</p>
<p><code>&lt;embed src=&quot;1.swf&quot; width=&quot;400&quot;&gt;</code></p>
</li>
</ul>
<p><strong>淘汰的原因;</strong></p>
<ul>
<li>需要flash，效率低</li>
<li>如果浏览器不支持 Flash，那么视频将无法播放</li>
<li>iPad 和 iPhone 不能显示 Flash 视频</li>
<li>将视频转换为其他格式，仍然不能在所有浏览器中播放</li>
<li>目前安卓4.4也抛弃了flash……</li>
</ul>
<h3 id="html5的新音视频标签"><a href="#html5的新音视频标签" class="headerlink" title="html5的新音视频标签"></a>html5的新音视频标签</h3><ul>
<li>视频基本标签用法 ：<ul>
<li><code>&lt;video width=&quot; &quot; height=&quot;&quot; src=&quot;&quot;&gt; &lt;/video&gt;</code></li>
<li>src 属性：指定播放文件的URL。</li>
<li>width、height属性：<ul>
<li>设置媒体元素的大小，单位为像素；</li>
<li>省略该属性，则使用播放源文件的大小；</li>
<li>仅设置宽度值，将根据播放源文件的长宽比例自动生成一个与之对应的高度值。</li>
</ul>
</li>
</ul>
</li>
<li>音频基本格式 ：<ul>
<li><code>&lt;audio  src=&quot;&quot; controls&gt; &lt;/audio&gt;</code></li>
<li>src 属性：指定播放文件的URL。</li>
<li>其他和视频一样。</li>
</ul>
</li>
<li>指定一种视频格式，不能播就提示： <code>&lt;video src=&quot;examp.mp4&quot; &gt;您的浏览器不支持&lt;/video&gt;</code></li>
<li>给定多个source标签，给定多种视频格式，浏览器根据自身支持程度选择播放哪一种 <code>&lt;source src=&quot;1.mp4&quot; type=&quot;video/mp4&quot; /&gt;</code></li>
</ul>
<h3 id="音视频标签的属性"><a href="#音视频标签的属性" class="headerlink" title="音视频标签的属性"></a>音视频标签的属性</h3><ul>
<li><p>preload：</p>
<p>该属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么</p>
<ul>
<li>none: 提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；换句话说就是提示浏览器该视频不需要缓存。</li>
<li>metadata: 提示尽管我们认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。</li>
<li>auto: 用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。</li>
<li>空字符串：也就代指 auto 值。</li>
</ul>
</li>
</ul>
<h1 id="CSS3"><a href="#CSS3" class="headerlink" title="CSS3"></a>CSS3</h1><h2 id="CSS3高级选择器"><a href="#CSS3高级选择器" class="headerlink" title="CSS3高级选择器"></a>CSS3高级选择器</h2><h3 id="动态伪类选择器"><a href="#动态伪类选择器" class="headerlink" title="动态伪类选择器"></a>动态伪类选择器</h3><ul>
<li>锚点伪类：link、visited</li>
<li>用户行为伪类：hover、active、focus</li>
<li>目标伪类target（IE9及以上）</li>
</ul>
<h3 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h3><table>
<thead>
<tr>
<th><strong>选择器</strong></th>
<th><strong>描述</strong></th>
</tr>
</thead>
<tbody><tr>
<td>E[attr]</td>
<td>有属性att的所有E元素</td>
</tr>
<tr>
<td>E[attr&#x3D;’val’]</td>
<td>属性att的值是val的元素</td>
</tr>
<tr>
<td>E[attr^&#x3D;’val’]</td>
<td>属性att的值以val开头的元素</td>
</tr>
<tr>
<td>E[attr$&#x3D;’val’]</td>
<td>属性att的值以val结尾的元素</td>
</tr>
<tr>
<td>E[attr*&#x3D;’val’]</td>
<td>属性att的值包含val字符串的元素</td>
</tr>
</tbody></table>
<h3 id="状态伪类选择器"><a href="#状态伪类选择器" class="headerlink" title="状态伪类选择器"></a>状态伪类选择器</h3><table>
<thead>
<tr>
<th><strong>选择器</strong></th>
<th><strong>描述</strong></th>
</tr>
</thead>
<tbody><tr>
<td>E:enabled</td>
<td>匹配表单中可用的元素</td>
</tr>
<tr>
<td>E:disabled</td>
<td>匹配表单中禁用的元素</td>
</tr>
<tr>
<td>E:checked</td>
<td>匹配表单中被选中的radio（单选框）或checkbox（复选框）元素</td>
</tr>
</tbody></table>
<blockquote>
<p>checkbox只能设置宽高，不能设置背景颜色和边框</p>
<p>需要清除默认样式appearance：none（需要兼容）</p>
</blockquote>
<h3 id="结构性选择器"><a href="#结构性选择器" class="headerlink" title="结构性选择器"></a>结构性选择器</h3><table>
<thead>
<tr>
<th><strong>选择器</strong></th>
<th><strong>描述</strong></th>
</tr>
</thead>
<tbody><tr>
<td>E:first-child</td>
<td>选择第一个子元素E</td>
</tr>
<tr>
<td>E:last-child</td>
<td>选择最后一个子元素E</td>
</tr>
<tr>
<td>E:nth-child(n)</td>
<td>选择一个或多个特定的子元素 （第一个编号为1）</td>
</tr>
<tr>
<td>E:nth-last-child(n)</td>
<td>选择一个或多个特定的子元素，从最后一个子元素开始算</td>
</tr>
<tr>
<td>E:only-child</td>
<td>匹配父元素下仅有的一个子元素</td>
</tr>
<tr>
<td>E:empty</td>
<td>匹配一个不包含任何子元素的元素 ( 文本节点也被看作子元素 )</td>
</tr>
<tr>
<td>E:not(s)</td>
<td>匹配不符合当前选择器的任何元素( 反选 )</td>
</tr>
</tbody></table>
<ul>
<li>练习</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>尺子练习<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;./reset.css&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">margin</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&gt;<span class="hljs-selector-tag">li</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">2px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">8px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: black;</span><br><span class="language-css">            <span class="hljs-attribute">float</span>: left;</span><br><span class="language-css">            <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">6px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">counter-increment</span>: num;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&gt;<span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">:nth-child</span>(<span class="hljs-number">5</span>n+<span class="hljs-number">1</span>)&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">3px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">11px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&gt;<span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">:nth-child</span>(<span class="hljs-number">10</span>n+<span class="hljs-number">1</span>)&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">4px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">14px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: relative;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&gt;<span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">:nth-child</span>(<span class="hljs-number">10</span>n)<span class="hljs-selector-pseudo">:after</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">content</span>: <span class="hljs-built_in">counter</span>(num);</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">            <span class="hljs-attribute">left</span>: -<span class="hljs-number">1px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">top</span>: <span class="hljs-number">15px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-selector-class">.outer</span>&gt;<span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">:nth-child</span>(<span class="hljs-number">1</span>)<span class="hljs-selector-pseudo">:after</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">content</span>: <span class="hljs-built_in">counter</span>(num);</span><br><span class="language-css">            <span class="hljs-attribute">position</span>: absolute;</span><br><span class="language-css">            <span class="hljs-attribute">top</span>: <span class="hljs-number">15px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">left</span>: -<span class="hljs-number">3px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-comment">&lt;!--</span><br><span class="hljs-comment">    css 自增函数：</span><br><span class="hljs-comment">        counter-increment：num；</span><br><span class="hljs-comment">        num是自己命名的</span><br><span class="hljs-comment">        每次选择器选择到一个元素，num就自加1  从1开始</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">        当在某个元素上使用 counter（num）  就得到了值</span><br><span class="hljs-comment">--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;outer&quot;</span>&gt;</span><br>        li*100<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h2 id="css3其他"><a href="#css3其他" class="headerlink" title="css3其他"></a>css3其他</h2><h3 id="圆角边框"><a href="#圆角边框" class="headerlink" title="圆角边框"></a>圆角边框</h3><ul>
<li><p>CSS3 圆角边框（IE9.0以前版本不支持）：</p>
<ul>
<li><p>border-radius：[ length | % ]{1,4} &#x2F; [ length | % ]{1,4}</p>
</li>
<li><p>border-top-left-radius:5px ;</p>
</li>
<li><p>border-top-right-radius:15px;</p>
</li>
<li><p>border-bottom-right-radius:20px;</p>
</li>
<li><p>border-bottom-left-radius:25px;</p>
</li>
<li><p>border-radius:5px 15px 20px 25px ;</p>
</li>
<li><p>border-radius:20px &#x2F; 10px ;</p>
</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>圆角边框<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#009ff2</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-comment">/*8个值：1 2 3 4/5 6 7 8*/</span></span><br><span class="language-css">            <span class="hljs-comment">/*1 2 3 4代表横向上的4个位置    5 6 7 8 代表竖向上的4个位置*/</span></span><br><span class="language-css">            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10px</span> <span class="hljs-number">20px</span> <span class="hljs-number">30px</span> <span class="hljs-number">40px</span>/<span class="hljs-number">50px</span> <span class="hljs-number">60px</span> <span class="hljs-number">70px</span> <span class="hljs-number">80px</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-comment">/*设置每个角1个半径，总共4个值*/</span></span><br><span class="language-css">            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">30px</span> <span class="hljs-number">40px</span> <span class="hljs-number">50px</span> <span class="hljs-number">60px</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-comment">/*横向都是40  竖向都是60px*/</span></span><br><span class="language-css">            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">40px</span>/<span class="hljs-number">60px</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-comment">/*左上右下是40  左下和右上是60*/</span></span><br><span class="language-css">            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">40px</span> <span class="hljs-number">60px</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">40px</span>/<span class="hljs-number">40px</span> <span class="hljs-number">70px</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">30px</span> <span class="hljs-number">50px</span> <span class="hljs-number">70px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">30px</span> <span class="hljs-number">50px</span> <span class="hljs-number">70px</span> <span class="hljs-number">50px</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">40px</span>;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-comment">/*border-radius百分比是相对于自身的宽高*/</span></span><br><span class="language-css">            <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">10%</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-comment">&lt;!--</span><br><span class="hljs-comment">    圆角边框：</span><br><span class="hljs-comment">        border-radius:允许设置元素的边框圆角</span><br><span class="hljs-comment">            当使用一个半径的时候，设置的是圆形的角</span><br><span class="hljs-comment">            当使用两个半径的时候，设置的是椭圆形的角</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">        值：可以是单位   百分比</span><br><span class="hljs-comment">--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h3 id="文字阴影"><a href="#文字阴影" class="headerlink" title="文字阴影"></a>文字阴影</h3><ul>
<li><p>text-shadow：none | length{2,3} color 默认值：none</p>
<p>none： 无阴影</p>
<p>第1个长度值：阴影水平偏移值。可为负值</p>
<p>第2个长度值：阴影垂直偏移值。可为负值</p>
<p>第3个长度值：可选，阴影模糊值。不允许负值</p>
<p>color： 设置阴影的颜色</p>
</li>
</ul>
<h3 id="盒子阴影"><a href="#盒子阴影" class="headerlink" title="盒子阴影"></a>盒子阴影</h3><ul>
<li><p>box-shadow。</p>
<p>和文本阴影相比，盒阴影多一个属性值——阴影外延值（第四个值）</p>
<p>第一个字可选，可以设置内阴影</p>
<p>box-shadow：none |inset length{2,4} color</p>
</li>
</ul>
<h3 id="倒影"><a href="#倒影" class="headerlink" title="倒影"></a>倒影</h3><ul>
<li><p>box-reflect:倒影</p>
<p>below &#x2F; above &#x2F; left &#x2F; right offset</p>
</li>
</ul>
<h3 id="滤镜设置"><a href="#滤镜设置" class="headerlink" title="滤镜设置"></a>滤镜设置</h3><ul>
<li><p>使用filter属性（IE不支持）</p>
<p>blur(<em>px</em>)：模糊</p>
<p>brightness(<em>%</em>)：亮度</p>
<p>contrast(<em>%</em>)：对比度</p>
<p>opacity(<em>%</em>)：透明度</p>
<p>saturate(<em>%</em>)：饱和度</p>
</li>
</ul>
<h3 id="css3多列布局"><a href="#css3多列布局" class="headerlink" title="css3多列布局"></a>css3多列布局</h3><h4 id="多列的概念"><a href="#多列的概念" class="headerlink" title="多列的概念"></a>多列的概念</h4><ul>
<li>css column 定义了多栏布局的模块</li>
<li>表现出列之间怎么流动，及多列之间的间隙和分割线，并且使用了列高平衡，除了最后一列，其他列高度一样</li>
</ul>
<h4 id="多列的属性"><a href="#多列的属性" class="headerlink" title="多列的属性"></a>多列的属性</h4><ul>
<li><p>column-count</p>
<ol>
<li>定义：规定元素应该被分隔的列数</li>
<li>语法：column-count: number;</li>
</ol>
</li>
<li><p>column-width</p>
<ol>
<li><p>定义：列的宽度</p>
</li>
<li><p>语法：column-width:像素值</p>
</li>
</ol>
</li>
</ul>
<blockquote>
<p>column-count和column-width用来控制列的宽度和数量：</p>
<ul>
<li>column-count是控制列数</li>
<li>column-width是控制每一列的最小宽度</li>
<li>column-count和column-width冲突的时候,分为栏数少的优先</li>
</ul>
<p>columns是简写，后边跟 count和width 也可以随意跟count和width其中的一个值</p>
</blockquote>
<ul>
<li><p>column-gap</p>
<ol>
<li>定义：规定列之间的间隔</li>
<li>语法：column-gap: 像素值;</li>
</ol>
</li>
<li><p>column-rule</p>
<ol>
<li><p>定义：所有 column-rule-* 属性的简写属性(颜色，样式，宽度)</p>
</li>
<li><p>语法：column-rule: 颜色，样式，宽度;</p>
</li>
<li><p>列之间规则的颜色：[column-rule-color]</p>
<p>列之间规则的样式：[column-rule-style]</p>
<p>列之间规则的宽度：[column-rule-width]</p>
</li>
</ol>
</li>
<li><p>column-span</p>
<ol>
<li>定义：元素应该横跨的列数</li>
<li>语法：column-span:all</li>
</ol>
</li>
</ul>
<h4 id="渐变"><a href="#渐变" class="headerlink" title="渐变"></a>渐变</h4><ul>
<li>渐变本质绘制的是一张图片（背景图片），所以使用background或者使用background-image （IE 6 7 8 9不支持）</li>
<li>百分比：把元素渐变方向的整体长度看成100%</li>
</ul>
<h4 id="线性渐变"><a href="#线性渐变" class="headerlink" title="线性渐变"></a>线性渐变</h4><ul>
<li><p>渐变的写法：</p>
<ul>
<li>从上到下（默认）：background: linear-gradient(red,blue);</li>
<li>从左到右：background: linear-gradient(to right,red,blue);</li>
<li>对角：background: linear-gradient(to right bottom,red,blue);</li>
<li>角度background: linear-gradient(45deg,red,blue);</li>
</ul>
</li>
<li><p>重复渐变</p>
<p>background: repeating-linear-gradient(90deg,red 0%,blue 20%);</p>
<p>background: repeating-linear-gradient(90deg,red 0%,blue 10%,red 20%);</p>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>地板砖<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.inner</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">1000px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">1000px</span>;</span><br><span class="language-css">            <span class="hljs-comment">/*background: linear-gradient(45deg,red 25%,transparent 25%,transparent 75%,red 75%),linear-gradient(135deg,red 25%,#fff 25%,#fff 75%,red 75%);*/</span></span><br><span class="language-css">            <span class="hljs-attribute">background</span>: <span class="hljs-built_in">repeating-linear-gradient</span>(<span class="hljs-number">45deg</span>,red <span class="hljs-number">25%</span>,transparent <span class="hljs-number">25%</span>,transparent <span class="hljs-number">75%</span>,red <span class="hljs-number">75%</span>,red <span class="hljs-number">100%</span>),<span class="hljs-built_in">repeating-linear-gradient</span>(<span class="hljs-number">135deg</span>,red <span class="hljs-number">25%</span>,<span class="hljs-number">#fff</span> <span class="hljs-number">25%</span>,<span class="hljs-number">#fff</span> <span class="hljs-number">75%</span>,red <span class="hljs-number">75%</span>,red <span class="hljs-number">100%</span>);</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">background-size</span>: <span class="hljs-number">100px</span> <span class="hljs-number">100px</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-comment">&lt;!--</span><br><span class="hljs-comment">    地板砖</span><br><span class="hljs-comment">--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;inner&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="径向渐变"><a href="#径向渐变" class="headerlink" title="径向渐变"></a>径向渐变</h4><ul>
<li><p>radial-gradient()</p>
<ul>
<li><p>第一个参数：圆的类型</p>
<p>ellipse：根据元素形状渐变，元素为正方形是显示效果与circle无异</p>
<p>circle：渐变为最大的圆形</p>
</li>
</ul>
</li>
<li><p>第二个参数：执行径向渐变的大小</p>
<p>farthest-corner:圆心到最远角</p>
<p>closest-side：圆心到最近的边</p>
<p>closest-corner：圆心到最近的角</p>
<p>farthest-side：圆心到最远的边</p>
<ul>
<li>第三个参数：圆心的位置</li>
<li>第四个参数：渐变的颜色点</li>
</ul>
</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.box</span>&#123;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">1000px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">300px</span>;<br>    <span class="hljs-attribute">background</span>: <span class="hljs-built_in">radial-gradient</span>(orangered,greenyellow);<br>    <span class="hljs-attribute">background</span>: <span class="hljs-built_in">radial-gradient</span>(circle,orangered,greenyellow);<br><br>    <span class="hljs-comment">/*background: -webkit-radial-gradient(800px 100px, farthest-side,orangered,greenyellow);*/</span><br><br>    <span class="hljs-attribute">background</span>: <span class="hljs-built_in">radial-gradient</span>(at left top,orangered,greenyellow);<br>    <span class="hljs-comment">/*background: radial-gradient(at center center,orangered,greenyellow);*/</span><br>&#125;<br><br></code></pre></td></tr></table></figure>



<h2 id="css3背景设置"><a href="#css3背景设置" class="headerlink" title="css3背景设置"></a>css3背景设置</h2><h3 id="背景图原点"><a href="#背景图原点" class="headerlink" title="背景图原点"></a>背景图原点</h3><ul>
<li><p>background-origin ：padding-box; (默认)</p>
<p>border-box | padding-box | content-box</p>
</li>
<li><p>background-origin是用来决定图片的原始起始位置。</p>
</li>
<li><p>它有三个可选值content-box,padding- box,border-box，即可以选择背景图片是从内容区域或者内边距或者边框开始显示。</p>
</li>
</ul>
<h3 id="背景图裁剪"><a href="#背景图裁剪" class="headerlink" title="背景图裁剪"></a>背景图裁剪</h3><ul>
<li><p>background-clip</p>
<p>border-box | padding-box | content-box</p>
</li>
<li><p>background-clip的作用为将背景图片做适当的裁剪，以适应需要。</p>
</li>
<li><p>background-clip有content- box,padding-box,border-box，text几个值剪裁方法：根据设置的盒子部位，那么图片在这个部位的外边缘以外的部分都会不可见。</p>
</li>
</ul>
<h3 id="背景图大小"><a href="#背景图大小" class="headerlink" title="背景图大小"></a>背景图大小</h3><ul>
<li><p>background-size</p>
<p>length： 长度值—第一个值设置宽度，第二个值设置高度</p>
<p>percentage： 百分比—第一个值设置宽度，第二个值设置高度</p>
<p>cover：等比缩放到完全覆盖容器，背景图像有可能超出容器</p>
<p>contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内</p>
</li>
</ul>
<h3 id="多重背景"><a href="#多重背景" class="headerlink" title="多重背景"></a>多重背景</h3><ul>
<li>background-image：CSS3允许您为元素使用多个背景图片</li>
<li>background-image: url(‘1.jpg),url(‘2.jpg’) … 使用逗号把图片分开</li>
<li>元素引入多个背景图片，前面图片会覆盖后面的图片</li>
</ul>
<h2 id="css3动画"><a href="#css3动画" class="headerlink" title="css3动画"></a>css3动画</h2><h3 id="过渡动画"><a href="#过渡动画" class="headerlink" title="过渡动画"></a>过渡动画</h3><ul>
<li><p>允许 CSS 的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画改变css的属性值</p>
</li>
<li><p>CSS3 过渡语法：</p>
<ul>
<li>transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]</li>
<li>[ transition-property ]： 检索或设置对象中的参与过渡的属性<ul>
<li>all | none | property,property …</li>
<li>all： 所有可以进行过渡的css属性</li>
<li>none： 不指定过渡的css属性</li>
<li>property： 指定要进行过渡的css属性</li>
</ul>
</li>
<li>[ transition-duration ]： 检索或设置对象过渡的持续时间</li>
<li>[ transition-timing-function ]： 检索或设置对象中过渡的动画类型<ul>
<li>transition-timing-function：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number)</li>
<li>检索或设置对象中过渡的动画类型</li>
<li>如果提供多个属性值，以逗号进行分隔</li>
<li><a target="_blank" rel="noopener" href="http://cubic-bezier.com/%EF%BC%88%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF%E7%94%9F%E6%88%90%E5%99%A8%EF%BC%89">http://cubic-bezier.com/（贝塞尔曲线生成器）</a></li>
</ul>
</li>
<li>[ transition-delay ]： 检索或设置对象延迟过渡的时间</li>
</ul>
</li>
<li><p>注意事项:</p>
<p>并不是所有元素都支持过度</p>
<p><strong>元素没有渲染完的情况下,过度不生效</strong></p>
</li>
</ul>
<h3 id="关键帧动画"><a href="#关键帧动画" class="headerlink" title="关键帧动画"></a>关键帧动画</h3><h4 id="关键帧"><a href="#关键帧" class="headerlink" title="关键帧"></a>关键帧</h4><ul>
<li><p>CSS3 动画语法－关键帧：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-keyword">@keyframes</span> name&#123;<br><br>  <span class="hljs-selector-attr">[keyframes-selector]</span> &#123; Properties:Properties value; &#125;<br><br>  <span class="hljs-selector-attr">[keyframes-selector]</span> &#123; Properties:Properties value; &#125;<br><br> &#125;<br></code></pre></td></tr></table></figure>

<ul>
<li>keyframes 控制关键位置，并不是所有的位置</li>
<li>keyframes-selector：必写项，动画持续时间的百分比</li>
<li>0% - 100%之间， 或者使用from和to关键字也可以设置，from代表0%，to代表100%</li>
</ul>
</li>
<li><p>案例</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-keyword">@keyframes</span> move&#123;<br>    <span class="hljs-number">0%</span> &#123; <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">100px</span>; <span class="hljs-attribute">background</span>: green; &#125;<br>    <span class="hljs-number">40%</span> &#123; <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">150px</span>; <span class="hljs-attribute">background</span>: orange; &#125;<br>    <span class="hljs-number">60%</span> &#123; <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">75px</span>; <span class="hljs-attribute">background</span>: blue; &#125;<br>    <span class="hljs-number">100%</span> &#123; <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">100px</span>; <span class="hljs-attribute">background</span>: red; &#125;<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<p>关键帧的使用</p>
<p>基础语法：</p>
<ul>
<li><p>animation-name:move; &#x2F;<em>动画属性名，前面keyframes样例定义的动画名</em>&#x2F;</p>
</li>
<li><p>animation-duration: 10s; &#x2F;<em>动画持续时间</em>&#x2F;</p>
</li>
<li><p>animation-timing-function: ease-in-out; &#x2F;<em>动画帧频，和transition-timing-function是一样的</em>&#x2F;&#x2F;<em>animation-timing-function:检测的是关键帧的区间，并不是整个动画过程</em>&#x2F;ease | linear | ease-in | ease-out | cubic-Bezier (n1 , n2, n3, n4)</p>
</li>
<li><p>animation-delay: 2s; &#x2F;<em>动画延迟时间</em>&#x2F;</p>
</li>
<li><p>animation-iteration-count: 10; &#x2F;<em>动画循环次数，infinite为无限次</em>&#x2F;</p>
</li>
<li><p>animation-direction: normal; &#x2F;<em>定义动画播放方式</em>&#x2F;</p>
<p>默认normal，动画正常播放； alternate，动画轮流反向播放</p>
</li>
<li><p>合写：animation:[<code>&lt;animation-name&gt;</code> || <code>&lt;animation-duration&gt;</code> ||<code>&lt;animation-timing-function&gt;</code> || <code>&lt;animation-delay&gt;</code> ||<code>&lt;animation-iteration-count&gt;</code> || <code>&lt;animation-direction&gt;</code>]</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>关键帧动画<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#009ff2</span>;</span><br><span class="language-css">            <span class="hljs-comment">/*animation: jello 1s infinite;*/</span></span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-comment">/*!*关键帧名称*!</span></span><br><span class="hljs-comment"><span class="language-css">            animation-name: move2;</span></span><br><span class="hljs-comment"><span class="language-css"></span></span><br><span class="hljs-comment"><span class="language-css">            !*关键帧动画执行总时间，百分比是平分了总时间*!</span></span><br><span class="hljs-comment"><span class="language-css">            animation-duration: 1s;</span></span><br><span class="hljs-comment"><span class="language-css"></span></span><br><span class="hljs-comment"><span class="language-css">            !*动画执行类型，在每一个帧节点之间进行动画类型*!</span></span><br><span class="hljs-comment"><span class="language-css">            animation-timing-function: linear;</span></span><br><span class="hljs-comment"><span class="language-css"></span></span><br><span class="hljs-comment"><span class="language-css">            !*整个动画的延迟时间*!</span></span><br><span class="hljs-comment"><span class="language-css">            animation-delay: 500ms;</span></span><br><span class="hljs-comment"><span class="language-css"></span></span><br><span class="hljs-comment"><span class="language-css">            !*动画执行的次数，可以是数字  可以是infinite*!</span></span><br><span class="hljs-comment"><span class="language-css">            animation-iteration-count: infinite;</span></span><br><span class="hljs-comment"><span class="language-css"></span></span><br><span class="hljs-comment"><span class="language-css">            !*动画播放方式：可以选择动画轮流反向播放*!</span></span><br><span class="hljs-comment"><span class="language-css">            animation-direction: alternate;*/</span></span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-comment">/*合写：按照刚才书写的顺序 依次书写即可  不用的可以省略*/</span></span><br><span class="language-css">            <span class="hljs-attribute">animation</span>:move2 <span class="hljs-number">3s</span> linear .<span class="hljs-number">5s</span> infinite alternate;</span><br><span class="language-css"></span><br><span class="language-css"></span><br><span class="language-css"></span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">        <span class="hljs-keyword">@keyframes</span>  move&#123;</span><br><span class="language-css">            <span class="hljs-number">0%</span>&#123;</span><br><span class="language-css">                <span class="hljs-comment">/*background-color: black;*/</span></span><br><span class="language-css">            &#125;</span><br><span class="language-css">            <span class="hljs-number">50%</span>&#123;</span><br><span class="language-css">                <span class="hljs-comment">/*变形在检测0%的时候没有这个属性，50%出现了，就会在0%到50%之间过渡*/</span></span><br><span class="language-css">                <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotateX</span>(<span class="hljs-number">30deg</span>);</span><br><span class="language-css">                <span class="hljs-attribute">background-color</span>: green;</span><br><span class="language-css">            &#125;</span><br><span class="language-css">            <span class="hljs-number">100%</span>&#123;</span><br><span class="language-css">                <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">            &#125;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">        <span class="hljs-keyword">@keyframes</span> move2 &#123;</span><br><span class="language-css">            <span class="hljs-number">0%</span>&#123;</span><br><span class="language-css">                <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">0px</span>;</span><br><span class="language-css">                <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">            &#125;</span><br><span class="language-css">            <span class="hljs-number">25%</span>&#123;</span><br><span class="language-css">                <span class="hljs-attribute">margin</span>:<span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">1000px</span>;</span><br><span class="language-css">                <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">scale</span>(<span class="hljs-number">1.3</span>);</span><br><span class="language-css">            &#125;</span><br><span class="language-css">            <span class="hljs-number">50%</span>&#123;</span><br><span class="language-css">                <span class="hljs-attribute">margin</span>: <span class="hljs-number">400px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">1000px</span>;</span><br><span class="language-css">            &#125;</span><br><span class="language-css">            <span class="hljs-number">100%</span>&#123;</span><br><span class="language-css">                <span class="hljs-attribute">margin</span>: <span class="hljs-number">400px</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">0</span>;</span><br><span class="language-css">            &#125;</span><br><span class="language-css">            <span class="hljs-comment">/*百分百不写就是默认*/</span></span><br><span class="language-css"></span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">        <span class="hljs-keyword">@keyframes</span> swing &#123;</span><br><span class="language-css">            <span class="hljs-number">20%</span> &#123;</span><br><span class="language-css">                -webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate3d</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">15deg</span>);</span><br><span class="language-css">                <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate3d</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">15deg</span>);</span><br><span class="language-css">            &#125;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-number">40%</span> &#123;</span><br><span class="language-css">                -webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate3d</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, -<span class="hljs-number">10deg</span>);</span><br><span class="language-css">                <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate3d</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, -<span class="hljs-number">10deg</span>);</span><br><span class="language-css">            &#125;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-number">60%</span> &#123;</span><br><span class="language-css">                -webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate3d</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">5deg</span>);</span><br><span class="language-css">                <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate3d</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">5deg</span>);</span><br><span class="language-css">            &#125;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-number">80%</span> &#123;</span><br><span class="language-css">                -webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate3d</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, -<span class="hljs-number">5deg</span>);</span><br><span class="language-css">                <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate3d</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, -<span class="hljs-number">5deg</span>);</span><br><span class="language-css">            &#125;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-selector-tag">to</span> &#123;</span><br><span class="language-css">                -webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate3d</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0deg</span>);</span><br><span class="language-css">                <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">rotate3d</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">0deg</span>);</span><br><span class="language-css">            &#125;</span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">        <span class="hljs-keyword">@-webkit-keyframes</span> jello &#123;</span><br><span class="language-css">            <span class="hljs-selector-tag">from</span>,</span><br><span class="language-css">            <span class="hljs-number">11.1%</span>,</span><br><span class="language-css">            <span class="hljs-selector-tag">to</span> &#123;</span><br><span class="language-css">                -webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translate3d</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);</span><br><span class="language-css">                <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translate3d</span>(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);</span><br><span class="language-css">            &#125;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-number">22.2%</span> &#123;</span><br><span class="language-css">                -webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">skewX</span>(-<span class="hljs-number">12.5deg</span>) <span class="hljs-built_in">skewY</span>(-<span class="hljs-number">12.5deg</span>);</span><br><span class="language-css">                <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">skewX</span>(-<span class="hljs-number">12.5deg</span>) <span class="hljs-built_in">skewY</span>(-<span class="hljs-number">12.5deg</span>);</span><br><span class="language-css">            &#125;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-number">33.3%</span> &#123;</span><br><span class="language-css">                -webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">skewX</span>(<span class="hljs-number">6.25deg</span>) <span class="hljs-built_in">skewY</span>(<span class="hljs-number">6.25deg</span>);</span><br><span class="language-css">                <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">skewX</span>(<span class="hljs-number">6.25deg</span>) <span class="hljs-built_in">skewY</span>(<span class="hljs-number">6.25deg</span>);</span><br><span class="language-css">            &#125;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-number">44.4%</span> &#123;</span><br><span class="language-css">                -webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">skewX</span>(-<span class="hljs-number">3.125deg</span>) <span class="hljs-built_in">skewY</span>(-<span class="hljs-number">3.125deg</span>);</span><br><span class="language-css">                <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">skewX</span>(-<span class="hljs-number">3.125deg</span>) <span class="hljs-built_in">skewY</span>(-<span class="hljs-number">3.125deg</span>);</span><br><span class="language-css">            &#125;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-number">55.5%</span> &#123;</span><br><span class="language-css">                -webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">skewX</span>(<span class="hljs-number">1.5625deg</span>) <span class="hljs-built_in">skewY</span>(<span class="hljs-number">1.5625deg</span>);</span><br><span class="language-css">                <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">skewX</span>(<span class="hljs-number">1.5625deg</span>) <span class="hljs-built_in">skewY</span>(<span class="hljs-number">1.5625deg</span>);</span><br><span class="language-css">            &#125;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-number">66.6%</span> &#123;</span><br><span class="language-css">                -webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">skewX</span>(-<span class="hljs-number">0.78125deg</span>) <span class="hljs-built_in">skewY</span>(-<span class="hljs-number">0.78125deg</span>);</span><br><span class="language-css">                <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">skewX</span>(-<span class="hljs-number">0.78125deg</span>) <span class="hljs-built_in">skewY</span>(-<span class="hljs-number">0.78125deg</span>);</span><br><span class="language-css">            &#125;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-number">77.7%</span> &#123;</span><br><span class="language-css">                -webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">skewX</span>(<span class="hljs-number">0.390625deg</span>) <span class="hljs-built_in">skewY</span>(<span class="hljs-number">0.390625deg</span>);</span><br><span class="language-css">                <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">skewX</span>(<span class="hljs-number">0.390625deg</span>) <span class="hljs-built_in">skewY</span>(<span class="hljs-number">0.390625deg</span>);</span><br><span class="language-css">            &#125;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-number">88.8%</span> &#123;</span><br><span class="language-css">                -webkit-<span class="hljs-attribute">transform</span>: <span class="hljs-built_in">skewX</span>(-<span class="hljs-number">0.1953125deg</span>) <span class="hljs-built_in">skewY</span>(-<span class="hljs-number">0.1953125deg</span>);</span><br><span class="language-css">                <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">skewX</span>(-<span class="hljs-number">0.1953125deg</span>) <span class="hljs-built_in">skewY</span>(-<span class="hljs-number">0.1953125deg</span>);</span><br><span class="language-css">            &#125;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-comment">&lt;!--</span><br><span class="hljs-comment">    @keyframes用来定义关键帧</span><br><span class="hljs-comment">    关键帧的起点是0%（from）  结束点是100%（to）</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">    当from和to不是默认样式的话，动画开始后会直接跳到0%的样式，动画结束后，会跳到动画默认样式</span><br><span class="hljs-comment"></span><br><span class="hljs-comment">    如果百分之0和百分之百不写，那么默认效果就是百分之0和百分百</span><br><span class="hljs-comment"></span><br><span class="hljs-comment"></span><br><span class="hljs-comment">--&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>过渡动画触发条件<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box</span><span class="hljs-selector-pseudo">:hover</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">animation</span>: change <span class="hljs-number">1s</span> linear <span class="hljs-number">4</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">        <span class="hljs-keyword">@keyframes</span> change &#123;</span><br><span class="language-css">            <span class="hljs-selector-tag">from</span>&#123;</span><br><span class="language-css">                <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">                <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">                <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css">            &#125;</span><br><span class="language-css">            <span class="hljs-selector-tag">to</span>&#123;</span><br><span class="language-css">                <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">                <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">                <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">            &#125;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn&quot;</span>&gt;</span>变！！！<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> oBox = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">&quot;.box&quot;</span>);</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> oBtn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">&quot;#btn&quot;</span>);</span><br><span class="language-javascript"></span><br><span class="language-javascript">        oBtn.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) &#123;</span><br><span class="language-javascript">            oBox.<span class="hljs-property">style</span>.<span class="hljs-property">animation</span>=<span class="hljs-string">&quot;change 1s linear 4&quot;</span></span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript"></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>过渡动画触发条件<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: red;</span><br><span class="language-css"></span><br><span class="language-css">            <span class="hljs-attribute">transition</span>: all <span class="hljs-number">1s</span>;</span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box2</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: green;</span><br><span class="language-css">        &#125;</span><br><span class="language-css"></span><br><span class="language-css">        <span class="hljs-selector-class">.box</span><span class="hljs-selector-pseudo">:hover</span>&#123;</span><br><span class="language-css">            <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;</span><br><span class="language-css">            <span class="hljs-attribute">background-color</span>: pink;</span><br><span class="language-css">        &#125;</span><br><span class="language-css">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn&quot;</span>&gt;</span>变！！！<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> oBox = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">&quot;.box&quot;</span>);</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> oBtn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">&quot;#btn&quot;</span>);</span><br><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-comment">// 第一种，添加行内样式覆盖原有样式</span></span><br><span class="language-javascript">        oBtn.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) &#123;</span><br><span class="language-javascript">            oBox.<span class="hljs-property">style</span>.<span class="hljs-property">backgroundColor</span> = <span class="hljs-string">&quot;pink&quot;</span>;</span><br><span class="language-javascript">            oBox.<span class="hljs-property">style</span>.<span class="hljs-property">width</span> = <span class="hljs-string">&quot;200px&quot;</span>;</span><br><span class="language-javascript">            oBox.<span class="hljs-property">style</span>.<span class="hljs-property">height</span> = <span class="hljs-string">&quot;200px&quot;</span>;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-comment">//第二种，改变类名来改变样式</span></span><br><span class="language-javascript">        oBtn.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) &#123;</span><br><span class="language-javascript">            oBox.<span class="hljs-property">classList</span>.<span class="hljs-title function_">add</span>(<span class="hljs-string">&quot;box2&quot;</span>);</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>
</li>
<li><p>动画的暂停和播放</p>
<ul>
<li>animation-play-state 属性<ul>
<li>paused：规定动画已暂停</li>
<li>running：规定动画正在播放</li>
</ul>
</li>
</ul>
</li>
<li><p>动画开始和结束状态</p>
<p>animation-fill-mode 属性</p>
<ul>
<li>none：使用得动画不会对动画等待和动画完成的元素样式产生改变</li>
<li>forwards：告诉浏览器动画结束后，元素的样式将设置为动画的最后一帧的样式</li>
<li>backwards ：那么在动画等待的那段时间内，元素的样式将设置为动画第一帧的样式</li>
<li>both：在动画等待和动画结束状态，元素将分别应用动画第一帧和最后一帧的样式</li>
</ul>
</li>
<li><p>逐帧动画</p>
<p>steps() 是 Animation 中的一个 timing-function 函数，</p>
<p>能够实现动画的阶跃式变化，而非两个状态间的线性过渡</p>
</li>
</ul>
<p>​	</p>
<h2 id="弹性盒子布局"><a href="#弹性盒子布局" class="headerlink" title="弹性盒子布局"></a>弹性盒子布局</h2><ul>
<li><p><strong>伸缩盒子模型</strong></p>
<ul>
<li>伸缩盒子模型控制的是父子关系</li>
<li>父元素：伸缩容器</li>
<li>子元素：伸缩项目</li>
<li>主轴：start-end</li>
<li>交叉轴（侧轴）</li>
</ul>
</li>
<li><p><strong>Flex容器</strong></p>
<p>display:flex</p>
<p>display:-webkit-box(旧版本)</p>
</li>
<li><p><strong>主轴布局方向</strong></p>
<p>flex容器flex-direction：</p>
<ul>
<li>row</li>
<li>row-reverse</li>
<li>column：主轴与侧轴发生对调</li>
<li>column-reverse</li>
</ul>
</li>
<li><p><strong>富余空间管理</strong>（主轴）</p>
<p>justify-content：</p>
<ul>
<li>flex-start</li>
<li>flex-end</li>
<li>center</li>
<li>space-around：富余空间包含伸缩项目</li>
<li>space-between：伸缩项目包含富裕空间</li>
</ul>
</li>
<li><p><strong>富余空间管理</strong>（侧轴）</p>
<p>align-items：</p>
<ul>
<li>flex-start</li>
<li>flex-end</li>
<li>baseline</li>
<li>center</li>
<li>stretch</li>
</ul>
</li>
<li><p><strong>弹性空间</strong></p>
<p>flex-grow : 将富裕空间分配到项目上</p>
</li>
<li><p><strong>项目换行</strong></p>
<p>Flex布局，如果没有执行换行，无论设置多宽都不会换行</p>
<p>flex-wrap: nowrap; — 默认值，父元素宽度不够，子元素自身宽度会被压缩</p>
<p>flex-wrap: wrap; — 父元素宽度不够，子元素会进行换行</p>
<p>flex-wrap: wrap-reverse; — 子元素换行的同时，侧轴的start与end发生对调</p>
<p>出现flex-wrap：wrap；之后，出现单行的富裕空间</p>
<p>注意：align-items 每一行的富裕空间，align-items: flex-start;</p>
</li>
<li><p><strong>控制整体侧轴的富裕空间</strong></p>
<p>align-content: flex-start; — 项目整体进行打包，放在整体侧轴的start处</p>
<p>align-content: flex-end; — 项目整体进行打包，放在整体侧轴的end处</p>
<p>align-content: center; — 项目整体进行打包，放在整体侧轴的center处;</p>
</li>
<li><p><strong>flex</strong>-<strong>flow</strong></p>
<p>是flex-wrap 与 flex-direction 的缩写</p>
<p>flex-flow:wrap-reverse column-reverse;</p>
</li>
<li><p><strong>order</strong></p>
<p>order排序，把排序元素先单独拿出来，让剩余元素先正常排列，排完之后，order元素在其后边再进行顺序排列</p>
<p>order是沿着主轴方向进行排序的</p>
</li>
<li><p><strong>项目自身侧轴的富裕空间</strong></p>
<p>每一个项目控制自身的侧轴</p>
<p>align-self: flex-start;</p>
<p>align-self: flex-end;</p>
<p>align-self: center;</p>
</li>
<li><p><strong>收缩率（flex项目</strong>）</p>
<p>当伸缩项目设置宽度，比容器宽度还要大时，元素并没有发生溢出的情况，那此时就出现一个东西叫 收缩因子（收缩率）</p>
<p>flex-shrink:拉伸因子 0 —不拉伸</p>
<p>flex-shrink:收缩因子 默认值：1 — 收缩</p>
</li>
<li><p><strong>子元素的基准值</strong></p>
<p>flex-basis：0</p>
</li>
<li><p><strong>flex</strong>属性</p>
<p>flex-basis,flex-grow,flex-shrink的缩写</p>
</li>
</ul>
<h2 id="响应式布局"><a href="#响应式布局" class="headerlink" title="响应式布局"></a>响应式布局</h2><h3 id="响应式布局的概念"><a href="#响应式布局的概念" class="headerlink" title="响应式布局的概念"></a>响应式布局的概念</h3><p>响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。</p>
<p>打个比方来说：现在社会有很多响应产品，例如折叠沙发，折叠床等等，</p>
<p>在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够兼容多个终端。</p>
<p>响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备&#x2F;浏览器能力）而变化</p>
<h3 id="什么时候用到响应式"><a href="#什么时候用到响应式" class="headerlink" title="什么时候用到响应式"></a>什么时候用到响应式</h3><ul>
<li>小型的项目或需求页PC端和移动端共用一套</li>
<li>大型的项目PC端（固定布局）和移动端（移动适配）各用一套</li>
</ul>
<h3 id="媒体查询"><a href="#媒体查询" class="headerlink" title="媒体查询"></a>媒体查询</h3><h4 id="为什么相应式web设计需要媒体查询"><a href="#为什么相应式web设计需要媒体查询" class="headerlink" title="为什么相应式web设计需要媒体查询"></a>为什么相应式web设计需要媒体查询</h4><ul>
<li>在媒体查询出现之前，针对不同尺寸设备的设计常常依靠JS或PHP等依靠userAgent来勉强实现，而现在自适应的响应式设计成为了家常便饭。</li>
<li>作为响应式布局的核心技术之一，媒体查询（media query）提供了一种检测设备特征的方法，它使开发者可以根据不同的设备特征应用不同样式，为不同设备创建合适的用户体验。</li>
<li>CSS3媒体查询可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式。如果没有媒体查询，光用CSS是无法大大修改网页外观的。</li>
<li>这个模块让我们可以提前编写出适应很多不可预测因素的CSS规则，比如屏幕方向水平或垂直、视口或大或小等等。</li>
<li>弹性布局虽然可以让设计适应较多场景，也包括某些尺寸的屏幕，但有时候确实不够用，因为我们还需要对布局进行更细致的调整。媒体查询让这一切成为可能，它就相当于CSS中基本的条件逻辑。</li>
</ul>
<h4 id="css2中的媒体查询"><a href="#css2中的媒体查询" class="headerlink" title="css2中的媒体查询"></a>css2中的媒体查询</h4><p>在CSS2中，媒体查询只使用于<code>style</code>和<code>link</code>标签中，以media属性存在；media属性用于为不同的媒介类型规定不同的样式</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">media</span>=<span class="hljs-string">&quot;screen,tv&quot;</span>&gt;</span><span class="language-xml"></span><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;demo.css&quot;</span> <span class="hljs-attr">media</span>=<span class="hljs-string">&quot;screen&quot;</span>&gt;</span></span><br><span class="language-xml"></span><br></code></pre></td></tr></table></figure>



<h4 id="媒介类型"><a href="#媒介类型" class="headerlink" title="媒介类型"></a>媒介类型</h4><figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs routeros">all           适合所有设备<span class="hljs-built_in"></span><br><span class="hljs-built_in">screen </span>        计算机屏幕（默认值） <br><span class="hljs-built_in">print</span>          打印预览模式 / 打印页   <br>tty            电传打字机以及使用等宽字符网格的类似媒介<br>tv             电视类型设备（低分辨率、有限的屏幕翻滚能力）<br>projection     放映机<br>handheld       手持设备（小屏幕、有限的带宽）<br>braille        盲人 用点字法反馈设备<br>aural          语音合成器<br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">media</span>=<span class="hljs-string">&quot;screen,tv&quot;</span>&gt;</span><span class="language-css"></span><br><span class="language-css"><span class="hljs-selector-class">.box</span>&#123;</span><br><span class="language-css">    <span class="hljs-attribute">height</span>: <span class="hljs-number">100px</span>;</span><br><span class="language-css">    <span class="hljs-attribute">width</span>: <span class="hljs-number">100px</span>; </span><br><span class="language-css">    <span class="hljs-attribute">background-color</span>: lightblue;</span><br><span class="language-css">&#125;    </span><br><span class="language-css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <br><br></code></pre></td></tr></table></figure>



<h4 id="媒体特征"><a href="#媒体特征" class="headerlink" title="媒体特征"></a>媒体特征</h4><p>媒体查询支持丰富的设备特征，除了我们最常看到的宽度和高度查询，还有一些其他的媒体特征比如方向、分辨率等对检测设备也很有用，更多常用的媒体特征详细信息可参考下表：</p>
<table>
<thead>
<tr>
<th>设备特征</th>
<th>取值</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>width</td>
<td>长度数值，如600px</td>
<td>输出设备渲染区域（如可视区域的宽度或打印机纸盒的宽度）的宽度</td>
</tr>
<tr>
<td>height</td>
<td>长度数值，如600px</td>
<td>输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度</td>
</tr>
<tr>
<td>aspect-raido</td>
<td>整数或小数</td>
<td>viewport 宽高比，值为宽度&#x2F;高度</td>
</tr>
<tr>
<td>orientation</td>
<td>portrait 或 landscape</td>
<td>设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式</td>
</tr>
<tr>
<td>resolution</td>
<td>数值</td>
<td>设备分辨率，如 300ppi</td>
</tr>
<tr>
<td>color</td>
<td>正整数</td>
<td>检查设备支持多少种颜色等</td>
</tr>
<tr>
<td>scan</td>
<td>progressive 或 interlace</td>
<td>输出设备的扫描方式，大部分现代屏幕使用 progressive 渐进式方式，部分等离子电视使用 interlace 隔行扫描</td>
</tr>
<tr>
<td>grid</td>
<td>0 或 1</td>
<td>判断输出设备是网格设备还是位图设备</td>
</tr>
</tbody></table>
<p>另外，对于部分取值为数值的属性，媒体查询可以使用 min- 或 max- 前缀表示范围，这为媒体查询提供了更方便的判断方式。例如使用 max-width: 320px 表示设备 viewport 的宽度小于等于 320px，min-width: 321px 表示 viewport 宽度大于等于 321px。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">max-width</span>: <span class="hljs-number">320px</span>) &#123; <span class="hljs-comment">/* viewports &lt;= 320px 时的样式*/</span> &#125;<br><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">321px</span>) &#123; <span class="hljs-comment">/* viewports &gt;= 321px 时的样式*/</span> &#125;<br><br></code></pre></td></tr></table></figure>



<h4 id="逻辑条件"><a href="#逻辑条件" class="headerlink" title="逻辑条件"></a>逻辑条件</h4><p>通过使用 and、not、only 等逻辑条件关键词，可以组合多个媒体查询条件。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css">and:<br>@media (min-width: <span class="hljs-number">700px</span>) and (orientation: landscape) &#123; ... &#125;<br>上面的示例是宽度大于 <span class="hljs-number">700px</span> 的媒体查询条件，如果你只想在横屏情况时使用这个条件，可以如下所示使用 and 操作符来合并媒体属性。<br><br></code></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs css">not 和 only:<br>使用 not 可以不在某种条件下使用当前媒体查询规则，如以下示例中媒体查询匹配 viewport 宽度大于 <span class="hljs-number">320px</span> 且不是打印机的设备。<br>可以用关键字not表示一个否定查询；not必须置于查询的一开头并会对整条查询串生效，除非逗号分割的多条<br><br>@media not print and (min-width: <span class="hljs-number">320px</span>) &#123; ... &#125;<br><br>而使用 only 可以仅在某种条件下使用规则，如示例中仅在 viewport 宽度大于 <span class="hljs-number">320px</span> 的屏幕设备中使用。<br><span class="hljs-keyword">@media</span> <span class="hljs-keyword">only</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">320px</span>) &#123; ... &#125;<br><br></code></pre></td></tr></table></figure>



<h4 id="使用媒体查询设置断点"><a href="#使用媒体查询设置断点" class="headerlink" title="使用媒体查询设置断点"></a>使用媒体查询设置断点</h4><p>如何选择网站内容的响应点，即如何选择不同 viewport 的 min-width 和 max-width 的取值，我们称为选择断点。在设计断点时，可以从最小支持的屏幕宽度开始，逐渐增加屏幕宽度，覆盖不同尺寸屏幕的体验。断点的设置主要取决于产品设计本身，没有万能媒体查询的代码。但经过实践，总结了一套比较具有代表性的设备断点，代码如下：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 很小的设备（手机等，小于 600px） */</span><br><span class="hljs-keyword">@media</span> <span class="hljs-keyword">only</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">max-width</span>: <span class="hljs-number">600px</span>) &#123;...&#125;<br><span class="hljs-comment">/* 比较小的设备（竖屏的平板，屏幕较大的手机等, 大于 600px） */</span><br><span class="hljs-keyword">@media</span> <span class="hljs-keyword">only</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">600px</span>) &#123;...&#125;<br><span class="hljs-comment">/* 中型大小设备（横屏的平板, 大于 768px） */</span><br><span class="hljs-keyword">@media</span> <span class="hljs-keyword">only</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">768px</span>) &#123;...&#125;<br><span class="hljs-comment">/* 大型设备（电脑, 大于 992px） */</span><br><span class="hljs-keyword">@media</span> <span class="hljs-keyword">only</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">992px</span>) &#123;...&#125;<br><span class="hljs-comment">/* 超大型设备（大尺寸电脑屏幕, 大于 1200px） */</span><br><span class="hljs-keyword">@media</span> <span class="hljs-keyword">only</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">1200px</span>) &#123;...&#125;<br><br></code></pre></td></tr></table></figure>

<h4 id="media-queries-level-4规范中心的媒体特性"><a href="#media-queries-level-4规范中心的媒体特性" class="headerlink" title="media queries level 4规范中心的媒体特性"></a>media queries level 4规范中心的媒体特性</h4><figure class="highlight sql"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs sql"><span class="hljs-keyword">update</span> – 根据设备的更新频度区分其类型 (<span class="hljs-keyword">none</span> 如打印机, slow 如电子墨水, fast 正常设备)<br>scripting – <span class="hljs-keyword">none</span> 不支持脚本或未启用 <span class="hljs-operator">|</span> <span class="hljs-keyword">initial</span><span class="hljs-operator">-</span><span class="hljs-keyword">only</span> 仅支持页面初始化脚本 <span class="hljs-operator">|</span> enabled 支持脚本并且已启用<br>pointer – 设备交互的精度 (coarse不精确如手指, fine 精确如鼠标, <span class="hljs-keyword">none</span> 无指点)<br>hover – 设备是否支持悬停状态<br><br></code></pre></td></tr></table></figure>



<h4 id="css3的媒体查询"><a href="#css3的媒体查询" class="headerlink" title="css3的媒体查询"></a>css3的媒体查询</h4><ul>
<li>媒体查询最基本的形式，就是单独或组合使用媒体类型和媒体特性(后者要置于括号中)，如</li>
</ul>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-keyword">@media</span> screen &#123;<br>    <span class="hljs-selector-tag">body</span> &#123;<br>        <span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span>;<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">@media</span> screen, print &#123;<br>    <span class="hljs-selector-tag">body</span> &#123;<br>        <span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span>;<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">width</span>: <span class="hljs-number">30em</span>) &#123;<br>    <span class="hljs-selector-tag">nav</span> <span class="hljs-selector-tag">li</span> &#123;<br>        <span class="hljs-attribute">display</span>: block;<br>    &#125;<br>&#125;<br><br><span class="hljs-keyword">@media</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">width</span>: <span class="hljs-number">30em</span>) &#123;<br>    <span class="hljs-selector-tag">nav</span> <span class="hljs-selector-tag">li</span> &#123;<br>        <span class="hljs-attribute">display</span>: block;<br>    &#125;<br>&#125;<br><br></code></pre></td></tr></table></figure>

<ul>
<li>引入外部文件时的媒体查询</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!--即使媒体查询不符，样式文件总会被下载--&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;styles.css&quot;</span> </span><br><span class="hljs-tag">    <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span> <span class="hljs-attr">media</span>=<span class="hljs-string">&quot;screen x-width: 480px)&quot;</span>&gt;</span><br><br></code></pre></td></tr></table></figure>



<h4 id="媒体查询的嵌套"><a href="#媒体查询的嵌套" class="headerlink" title="媒体查询的嵌套"></a>媒体查询的嵌套</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-keyword">@media</span> screen &#123;<br>    <span class="hljs-keyword">@media</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">20em</span>) &#123;<br>        <span class="hljs-selector-tag">img</span> &#123;<br>            <span class="hljs-attribute">display</span>: block;<br>            <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;<br>            <span class="hljs-attribute">height</span>: auto;<br>        &#125;<br>    &#125;<br>    <span class="hljs-keyword">@media</span> (<span class="hljs-attribute">min-width</span>: <span class="hljs-number">40em</span>) &#123;<br>        <span class="hljs-selector-tag">img</span> &#123;<br>            <span class="hljs-attribute">display</span>: inline-block;<br>            <span class="hljs-attribute">max-width</span>: <span class="hljs-number">300px</span>;<br>        &#125;<br>    &#125; <br>&#125;<br><br></code></pre></td></tr></table></figure>



<h4 id="less书写媒体查询"><a href="#less书写媒体查询" class="headerlink" title="less书写媒体查询"></a>less书写媒体查询</h4><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs css">*&#123;<br>  <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;<br>  <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;<br>&#125;<br><br><span class="hljs-selector-id">#box</span>&#123;<br>  <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br>  <span class="hljs-attribute">height</span>: <span class="hljs-number">200px</span>;<br>  <span class="hljs-attribute">background-color</span>: red;<br>  <span class="hljs-keyword">@media</span> screen <span class="hljs-keyword">and</span> (<span class="hljs-attribute">max-width</span>: <span class="hljs-number">768px</span>)&#123;<br>    <span class="hljs-attribute">background-color</span>: yellow;<br>  &#125;<br>&#125;<br><br></code></pre></td></tr></table></figure>







<h1 id="JavaScript基础"><a href="#JavaScript基础" class="headerlink" title="JavaScript基础"></a>JavaScript基础</h1><h2 id="Js初步使用"><a href="#Js初步使用" class="headerlink" title="Js初步使用"></a>Js初步使用</h2><h3 id="Js的引入"><a href="#Js的引入" class="headerlink" title="Js的引入"></a>Js的引入</h3><p>使用<code>script</code>标签引入</p>
<p>script标签的属性:</p>
<ul>
<li>src 可选, 表示包含要执行代码的外部文件</li>
<li>type: 可选 一般为 text&#x2F;javascript .现代浏览器默认脚本类型是javascript, 还可设置为module 支持模块化</li>
</ul>
<h3 id="Js的各种引入特性"><a href="#Js的各种引入特性" class="headerlink" title="Js的各种引入特性"></a>Js的各种引入特性</h3><h4 id="延迟执行Js-defer"><a href="#延迟执行Js-defer" class="headerlink" title="延迟执行Js-defer"></a>延迟执行<code>Js-defer</code></h4><ul>
<li><code>&lt;script&gt;</code>标签有一个布尔型属性defer，这个属性的用途是表明脚本在执行时不会影响页面的构造，也就是说，脚本会被延迟到整个页面都解析完成后再运行。</li>
<li>因此在script元素中设置defer属性，相当于告诉浏览器立即下载，但是延迟执行</li>
<li>如果页面中有多个延迟脚本，那么第一个延迟脚本会先于第二个延迟脚本执行，而这些脚本会先于DOMContentLoaded事件执行</li>
<li>适用于外部JS文件，不适用于script标签包含的脚本</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;./01.js&quot;</span> <span class="hljs-attr">defer</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="异步加载Js文件-async"><a href="#异步加载Js文件-async" class="headerlink" title="异步加载Js文件 - async"></a>异步加载Js文件 - async</h4><ul>
<li>在默认情况下，网页都是同步加载外部 JavaScript文件的，在引入外部js文件时会阻塞dom的执行，为此在html4.01为script标签引入了async属性</li>
<li>现在可以为<code>&lt;script&gt;</code>标签设置 async属性，让浏览器异步加载 Javascript文件，即表示应该立即下载脚本，但不应妨碍页面汇总的其它操作。只对外部脚本文件有效。</li>
<li>异步脚本不要在加载期间修改DOM，异步脚本语言一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件(DOM渲染完成的监听事件)触发之前或之后执行。</li>
<li>因为是下载完立即执行，不能保证多个加载时的先后顺序，因此确保异步脚本之间互不依赖</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">async</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;http://libs.baidu.com/jquery/2.0.0/jquery.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>



<h4 id="async-amp-defer"><a href="#async-amp-defer" class="headerlink" title="async &amp; defer"></a>async &amp; defer</h4><ul>
<li><p>没有设置任何属性的script</p>
<p>HTML文件将被解析，直到脚本文件被下载为止，同时将停止解析，发起请求去提取script文件（如果是外部文件）。下载并执行完成后将在恢复解析HTML。</p>
</li>
<li><p>设置了defer属性</p>
<p>设置defer属性会在HTML解析的同时下载script，并在完成HTML解析和script下载之后执行该文件，同时设置了defer的脚本会按照他们在文档里面出现的顺序执行。</p>
</li>
<li><p>设置了async属性</p>
<p>设置async属性会在HTML解析期间下载script文件，并在完成下载后暂停HTML解析器以执行该文件。</p>
</li>
</ul>
<h3 id="Js的关键字保留字"><a href="#Js的关键字保留字" class="headerlink" title="Js的关键字保留字"></a>Js的关键字保留字</h3><table>
<thead>
<tr>
<th>关键字</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td>break</td>
<td>do</td>
<td>instanceof</td>
<td>typeof</td>
</tr>
<tr>
<td>case</td>
<td>else</td>
<td>new</td>
<td>var</td>
</tr>
<tr>
<td>catch</td>
<td>finally</td>
<td>return</td>
<td>void</td>
</tr>
<tr>
<td>continue</td>
<td>for</td>
<td>switch</td>
<td>while</td>
</tr>
<tr>
<td>debugger*</td>
<td>function</td>
<td>this</td>
<td>with</td>
</tr>
<tr>
<td>default</td>
<td>if</td>
<td>throw</td>
<td>delete</td>
</tr>
<tr>
<td>in</td>
<td>try</td>
<td>top</td>
<td></td>
</tr>
</tbody></table>
<table>
<thead>
<tr>
<th>保留字</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td>abstract</td>
<td>enum</td>
<td>int</td>
<td>short</td>
</tr>
<tr>
<td>boolean</td>
<td>export</td>
<td>interface</td>
<td>static</td>
</tr>
<tr>
<td>byte</td>
<td>extends</td>
<td>long</td>
<td>super</td>
</tr>
<tr>
<td>char</td>
<td>final</td>
<td>native</td>
<td>synchronized</td>
</tr>
<tr>
<td>class</td>
<td>float</td>
<td>package</td>
<td>throws</td>
</tr>
<tr>
<td>const</td>
<td>goto</td>
<td>private</td>
<td>transient</td>
</tr>
<tr>
<td>debugger</td>
<td>implements</td>
<td>protected</td>
<td>volatile</td>
</tr>
<tr>
<td>double</td>
<td>import</td>
<td>public</td>
<td>yield</td>
</tr>
<tr>
<td>implements</td>
<td>package</td>
<td>public</td>
<td>interface</td>
</tr>
<tr>
<td>private</td>
<td>static</td>
<td>let</td>
<td>protected</td>
</tr>
</tbody></table>
<h2 id="Js数据类型"><a href="#Js数据类型" class="headerlink" title="Js数据类型"></a>Js数据类型</h2><p>JavaScript中的数据类型分为两类，<strong>undefined，number，boolean，string，symbol，bigint，null<a target="_blank" rel="noopener" href="https://blog.csdn.net/qq_35508835/article/details/113764707#fn1">1</a>组成的基础类型</strong>和<strong>Object、Function、Array等类型组成的引用类型</strong>。</p>
<h3 id="typeof操作符"><a href="#typeof操作符" class="headerlink" title="typeof操作符"></a>typeof操作符</h3><ul>
<li>typeof 就是负责检测给定变量的数据类型的操作符，格式为 <code>typeof（a）</code>或<code> typeof a</code> ；</li>
<li>有些时候 typeof 操作符会返回一些令人迷惑但技术上却正确的值<ul>
<li>把null归为Object类型，而不是作为特殊的值</li>
<li>把函数归为Function类型，而不是Object类型的一个子类</li>
</ul>
</li>
<li>typeof判断数据类型共有8个值，它们分别是<ul>
<li>‘undefined’、‘number’、‘<a target="_blank" rel="noopener" href="https://so.csdn.net/so/search?q=boolean&spm=1001.2101.3001.7020">boolean</a>’、‘string’、‘symbol’、‘bigint’、‘object’和‘function’。</li>
</ul>
</li>
</ul>
<h3 id="undifind类型"><a href="#undifind类型" class="headerlink" title="undifind类型"></a>undifind类型</h3><h4 id="常见的undifind环境"><a href="#常见的undifind环境" class="headerlink" title="常见的undifind环境"></a>常见的undifind环境</h4><ul>
<li>变量被声明了，但没有赋值时，就等于undefined</li>
<li>调用函数时，应该提供的参数没有提供，该参数等于undefined</li>
<li>对象没有赋值的属性，该属性的值为undefined</li>
<li>函数没有返回值时，默认返回undefined</li>
<li>检测一个变量是否初始化，如果没有，就为其赋值</li>
</ul>
<h3 id="null类型"><a href="#null类型" class="headerlink" title="null类型"></a>null类型</h3><h4 id="常见null类型出现环境"><a href="#常见null类型出现环境" class="headerlink" title="常见null类型出现环境"></a>常见null类型出现环境</h4><ul>
<li>作为函数的参数，表示该函数的参数不是对象</li>
<li>作为对象原型链的终点</li>
<li>如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null而不是其他值</li>
</ul>
<h4 id="undefined和null"><a href="#undefined和null" class="headerlink" title="undefined和null"></a>undefined和null</h4><ul>
<li>Undefined派生自Null，两者都是表示空缺值，转换成布尔值都是假值，可以相等</li>
<li>但是Undefined和Null属于两种不同的类型</li>
<li>Undefined隐含着意外的空值，而Null隐含着意料之中的空值。因此设置一个变量、参数为空的时候，建议使用null而不是undefined</li>
</ul>
<h3 id="number类型"><a href="#number类型" class="headerlink" title="number类型"></a>number类型</h3><p>数字（Number）也称为数值或者数</p>
<ul>
<li>整数，浮点数值（数字直接量）</li>
<li>八进制数（010、025）</li>
<li>十六进制数（0xa、0x1c）</li>
<li>二进制数</li>
<li>科学计数法</li>
<li>Number.MIN_VALUE</li>
<li>Number.Max_VALUE</li>
<li>Infinity</li>
<li>NaN</li>
</ul>
<h4 id="最大值最小值"><a href="#最大值最小值" class="headerlink" title="最大值最小值"></a>最大值最小值</h4><p>在js中数字也是有最大值和最小值的支持的，如果超过最大值或最小值，就可能计算有误</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 在js中数字也是有最大值和最小值的支持的，如果超过最大值或最小值，就可能计算有误</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Number</span>.<span class="hljs-property">MIN_VALUE</span>);<span class="hljs-comment">//5e-324  支持数字的最小值</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Number</span>.<span class="hljs-property">MAX_VALUE</span>);<span class="hljs-comment">//1.7976931348623157e+308 支持数字的最大值</span><br><br></code></pre></td></tr></table></figure>



<h4 id="NaN"><a href="#NaN" class="headerlink" title="NaN"></a>NaN</h4><ul>
<li><p>NaN,即非数值(Not a Number)是一个特殊的数值</p>
</li>
<li><p>这个数值用于表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)</p>
</li>
<li><p>aN特点：无论和谁比较都是fasle 无论和谁计算都是NaN</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> num8 = <span class="hljs-string">&quot;邓子雄&quot;</span>-<span class="hljs-number">1</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num8)<span class="hljs-comment">//NaN</span><br><br><span class="hljs-comment">// NaN特点：无论和谁比较都是fasle  无论和谁计算都是NaN</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">NaN</span>+<span class="hljs-number">1</span>);<span class="hljs-comment">//NaN</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">NaN</span>&gt;<span class="hljs-number">1</span>);<span class="hljs-comment">//fasle</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">NaN</span>==<span class="hljs-number">1</span>);<span class="hljs-comment">//fasle</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">NaN</span>&lt;<span class="hljs-number">1</span>);<span class="hljs-comment">//fasle</span><br><br></code></pre></td></tr></table></figure></li>
</ul>
<h4 id="isNaN方法的使用"><a href="#isNaN方法的使用" class="headerlink" title="isNaN方法的使用"></a>isNaN方法的使用</h4><ul>
<li>isNaN方法检测一个值是不是非纯数字 , 如果非纯数字就返回true 如果是纯数字就返回false</li>
<li>案例：点击检测的时候，判断是不是全部是数字</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>isNaN<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    请输入您的电话号码：<br>    <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;ipt&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn&quot;</span>&gt;</span>检测<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-comment">/*</span></span><br><span class="hljs-comment"><span class="language-javascript">        *   1、点击按钮 (给按钮绑定点击事件)</span></span><br><span class="hljs-comment"><span class="language-javascript">        *   2、获取input的值ss</span></span><br><span class="hljs-comment"><span class="language-javascript">        *   3、使用isNaN检测</span></span><br><span class="hljs-comment"><span class="language-javascript">        *   4、判断检测的值是true还是false</span></span><br><span class="hljs-comment"><span class="language-javascript">        *   5、如果是true则 输入的值不是纯数字 如果为false 则是纯数字</span></span><br><span class="hljs-comment"><span class="language-javascript">         */</span></span><br><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-comment">// 0、获取标签</span></span><br><span class="language-javascript">        <span class="hljs-comment">/*document(文档)</span></span><br><span class="hljs-comment"><span class="language-javascript">        . 成员访问  访问文档里的属性或方法</span></span><br><span class="hljs-comment"><span class="language-javascript">        get是获取</span></span><br><span class="hljs-comment"><span class="language-javascript">        Element是元素</span></span><br><span class="hljs-comment"><span class="language-javascript">        By是通过</span></span><br><span class="hljs-comment"><span class="language-javascript">        Id  id名  括号里不是变量 要加上引号*/</span></span><br><span class="language-javascript">        <span class="hljs-comment">// 得到值 需要用一个变量保存这个元素</span></span><br><span class="language-javascript">        <span class="hljs-comment">// 命名规则 凡是获取DOM的元素的变量名 同意o开头，后边第一个字母大写</span></span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> oIpt = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;ipt&quot;</span>);</span><br><span class="language-javascript">        <span class="hljs-keyword">var</span> oBtn = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">&quot;btn&quot;</span>);</span><br><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-comment">// 1、当点击btn的时候  onclick是点击事件  后边把一个匿名函数赋值给oBtn.onclick</span></span><br><span class="language-javascript">        <span class="hljs-comment">// 这个时候，当点击btn的时候，函数就会执行</span></span><br><span class="language-javascript">        oBtn.<span class="hljs-property">onclick</span>=<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) &#123;</span><br><span class="language-javascript">            <span class="hljs-comment">//2 获取input的值  并用变量保存</span></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> userCon = oIpt.<span class="hljs-property">value</span>;</span><br><span class="language-javascript">            <span class="hljs-comment">// 3、判断是否纯数字 isTrue为true 则包含其他字符  为false则纯数字</span></span><br><span class="language-javascript">            <span class="hljs-keyword">var</span> isTrue = <span class="hljs-built_in">isNaN</span>(userCon);</span><br><span class="language-javascript">            <span class="hljs-comment">//4、判断并执行</span></span><br><span class="language-javascript">            <span class="hljs-comment">//     如果isTrue为true 则弹出请重新输入，否则弹出输入正确</span></span><br><span class="language-javascript">            <span class="hljs-keyword">if</span> (isTrue == <span class="hljs-literal">true</span>) &#123;</span><br><span class="language-javascript">                <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;请重新输入&quot;</span>);</span><br><span class="language-javascript">            &#125;<span class="hljs-keyword">else</span>&#123;</span><br><span class="language-javascript">                <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;输入正确&quot;</span>);</span><br><span class="language-javascript">            &#125;</span><br><span class="language-javascript">        &#125;</span><br><span class="language-javascript"></span><br><span class="language-javascript"></span><br><span class="language-javascript"></span><br><span class="language-javascript">        <span class="hljs-comment">/*// 上边代码优化如下</span></span><br><span class="hljs-comment"><span class="language-javascript">        var oIpt = document.getElementById(&quot;ipt&quot;);</span></span><br><span class="hljs-comment"><span class="language-javascript">        var oBtn = document.getElementById(&quot;btn&quot;);</span></span><br><span class="hljs-comment"><span class="language-javascript">        oBtn.onclick=function () &#123;</span></span><br><span class="hljs-comment"><span class="language-javascript">            if (isNaN(oIpt.value)) &#123;</span></span><br><span class="hljs-comment"><span class="language-javascript">                alert(&quot;请重新输入&quot;);</span></span><br><span class="hljs-comment"><span class="language-javascript">            &#125;else&#123;</span></span><br><span class="hljs-comment"><span class="language-javascript">                alert(&quot;输入正确&quot;);</span></span><br><span class="hljs-comment"><span class="language-javascript">            &#125;</span></span><br><span class="hljs-comment"><span class="language-javascript">        &#125;*/</span></span><br><span class="language-javascript">    </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br><br></code></pre></td></tr></table></figure>



<h4 id="浮点数溢出"><a href="#浮点数溢出" class="headerlink" title="浮点数溢出"></a>浮点数溢出</h4><ul>
<li>执行数值计算，要防止浮点数溢出，例如 0.1+0.2不等于0.3</li>
<li>因为js执行二进制浮点数算术标准而导致的问题。</li>
<li>解决方法：浮点数的证书运算是精确的，所以消除表现的问题可以通过指定精度来避免。比如（1+2）&#x2F;10</li>
</ul>
<h4 id="类型转换方法"><a href="#类型转换方法" class="headerlink" title="类型转换方法"></a>类型转换方法</h4><h5 id="Number"><a href="#Number" class="headerlink" title="Number()"></a>Number()</h5><p>Number()方法 将其他类型转换成number类型 Number方法会返回一个转换后的值</p>
<h5 id="parseInt"><a href="#parseInt" class="headerlink" title="parseInt()"></a>parseInt()</h5><p>parseInt是一个全局方法,它可以把值转换为整数</p>
<ul>
<li>第1步,先解析位置0处的字符,如果不是有效数字,则直接返回 NaN。</li>
<li>第2步,如果位置0处的字符是数字,或者可以转换为有效数字,则继续解析位置1处的字符,如果不是有效数字,则直接返回位置0处的有效数字。</li>
<li>第3步,以此类推,按从左到右的顺序,逐个分析每个字符,直到发现非数字字符为止。</li>
<li>第4步,parseInt()将把前面分析合法的数字字符全部转换为数值并返回。</li>
</ul>
<blockquote>
<p>注意： 浮点数中的点号对于parseInt来说属于非法字符,因此不会转换小数部分值。 如果是以0开头的数字字符串,则parseInt()不会把它作为八进制数字处理 如果是以0x 开头的数字字符串,则 parseInt()会把它作为十六进制数字处理:先把它转换为十六进 制数值,然后再转换为十进制的数字返回。</p>
</blockquote>
<blockquote>
<p>parsInt也支持基模式，可以把不同进制的数字字符串转换为整数</p>
</blockquote>
<h5 id="parseFloat"><a href="#parseFloat" class="headerlink" title="parseFloat()"></a>parseFloat()</h5><ul>
<li>parseFloat()也是一个全局方法，它可以把值转换成浮点数，即它能够识别第一个出现的小数点，而第二个小数点视为非法。解析过程和parseInt相同。</li>
<li>parseFloat()的参数必须是十进制的字符串，对十六进制和八进制前的0进行忽略或返回0。</li>
</ul>
<h5 id="乘号运算符"><a href="#乘号运算符" class="headerlink" title="乘号运算符"></a>乘号运算符</h5><p>如果变量乘以1，则变量会被JS自动转换成数值，如果无法转换成合法数值，则返回NaN</p>
<h3 id="string类型"><a href="#string类型" class="headerlink" title="string类型"></a>string类型</h3><h4 id="字符串直接量"><a href="#字符串直接量" class="headerlink" title="字符串直接量"></a>字符串直接量</h4><ul>
<li>子行串必须包含在单引号或双引号中</li>
<li>如果字符串包含在双引号中,则字符串内可以包含单引号;反之,也可以在单引号中包含双引号</li>
<li>在ECMAScript 3中,字符串必须在一行内表示,换行表示是不允许的，如果要换行显示字符串,可以在字符串中添加换行符(\n)</li>
<li>在ECMAScript 5中,字符串允许多行表示.实现方法:在换行结尾处添加反斜杠().反斜杠和换行符不作为字符串直接量的内容</li>
<li>在字符串中插入特殊字符,需要使用转义字符,如单引号,双引号等</li>
<li>字符串中每个字符都有固定的位置.第1个子符的下标位置为0,第2个字符的下标位置为1…···以此类推,最后一个字符的下标位置是字符串长度减1</li>
</ul>
<h4 id="转义符"><a href="#转义符" class="headerlink" title="转义符"></a>转义符</h4><p>转义字符是字符的一种间接表示方式。在特殊语境中,无法直接使用字符自身</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;请看\&quot;这个是一个双引号&quot;</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str);<span class="hljs-comment">//请看&quot;这个是一个双引号</span><br></code></pre></td></tr></table></figure>



<p>一些字符加上反斜杠后会表示特殊字符,而不是原字符本身,这些特殊转义字符被称为转义序列</p>
<blockquote>
<p>\0 Null字符(\u0000)</p>
<p>\b 退格符(\u0008)</p>
<p>\t 水平制表符(lu0009)</p>
<p>\n 换行符(lu000A)</p>
<p>\v 垂直制表符(\u000B)</p>
<p>\f 换页符(\u000C)</p>
<p>\r 回车符(\u000D)</p>
</blockquote>
<p>如果在一个正常字符前添加反斜杠,JavaScript会忽略该反斜杠</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;小明妈妈说:\&quot;今天天气真好\&quot;&quot;</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str);<span class="hljs-comment">//小明妈妈说:&quot;今天天气真好&quot;</span><br><span class="hljs-keyword">var</span> str2 = <span class="hljs-string">&quot;小明妈妈说:\&quot;\今\天\天\气\真\好\&quot;&quot;</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str2);<span class="hljs-comment">//小明妈妈说:&quot;今天天气真好&quot;</span><br><span class="hljs-keyword">var</span> str3 = <span class="hljs-string">&quot;看我斜杠：\\&quot;</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str3);<span class="hljs-comment">//看我斜杠：\</span><br></code></pre></td></tr></table></figure>



<h4 id="字符串操作"><a href="#字符串操作" class="headerlink" title="字符串操作"></a>字符串操作</h4><ul>
<li>借助String类型的原型方法,可以灵活操作字符串</li>
<li>在JavaScript中,可以使用加号(+)运算符连接两个字符串</li>
<li>使用字符串的length属性获取字符串的字符个数(长度）</li>
<li>在ES5中，字符串可以作为只读数组使用，可以通过中括号运算符添加下标访问某一个值。下标从0开始，最大位置的下标是length-1</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> str = <span class="hljs-string">&quot;老师说&quot;</span>;<br><span class="hljs-keyword">var</span> say = <span class="hljs-string">&quot;你好啊&quot;</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str+say);<span class="hljs-comment">//老师说你好啊</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str + <span class="hljs-number">1</span>);<span class="hljs-comment">//老师说1</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str + <span class="hljs-number">1</span>);<span class="hljs-comment">//老师说1</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">1</span> + <span class="hljs-number">1</span>);<span class="hljs-comment">//2</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;1&quot;</span> + <span class="hljs-number">1</span>);<span class="hljs-comment">//11</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">1</span> + <span class="hljs-string">&quot;1&quot;</span>);<span class="hljs-comment">//11</span><br><span class="hljs-keyword">var</span> str1 = <span class="hljs-string">&quot;今天是个好天气123 b5&quot;</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str1.<span class="hljs-property">length</span>);<span class="hljs-comment">//13</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str1[<span class="hljs-number">0</span>]);<span class="hljs-comment">//今</span><br><span class="hljs-comment">//获取最后一个字符</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(str1[str1.<span class="hljs-property">length</span>-<span class="hljs-number">1</span>]);<span class="hljs-comment">//5</span><br></code></pre></td></tr></table></figure>





<h3 id="boolean类型"><a href="#boolean类型" class="headerlink" title="boolean类型"></a>boolean类型</h3><p>布尔类型仅包含两个固定的值：<code>true</code>和<code>false</code>。其中<code>true</code>代表真，<code>false</code>代表假。</p>
<p>在一些判断等操作中，需要使用布尔值</p>
<h4 id="双重逻辑非"><a href="#双重逻辑非" class="headerlink" title="双重逻辑非"></a>双重逻辑非</h4><p>一个逻辑非运算符（!）可以把值转换为布尔值并取反，两个就是转换成正确的布尔值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(!!<span class="hljs-number">0</span>);   <br></code></pre></td></tr></table></figure>





<h2 id="Js语句"><a href="#Js语句" class="headerlink" title="Js语句"></a>Js语句</h2><h3 id="声明语句"><a href="#声明语句" class="headerlink" title="声明语句"></a>声明语句</h3><p>声明语句包含三种：声明变量、声明函数和声明标签</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 声明函数 使用function关键字</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">f</span>(<span class="hljs-params"></span>) &#123;&#125;<br><br><span class="hljs-comment">// 声明变量</span><br><span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>;<span class="hljs-comment">//有声明提升  作用域按照函数计算</span><br><span class="hljs-keyword">let</span> b = <span class="hljs-number">2</span>;<span class="hljs-comment">//无声明提升  作用域按照代码块计算</span><br><span class="hljs-keyword">const</span> <span class="hljs-variable constant_">MAX</span> = <span class="hljs-number">100</span>;<span class="hljs-comment">//无声明提升  常量  不能被修改或者重新赋值</span><br><br><span class="hljs-comment">// 声明标签Label:</span><br><span class="hljs-comment">// 声明语句一般都是配合continue和break来使用的，在后边流程控制语句中讲解</span><br><span class="hljs-attr">for1</span>:<br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>;i&lt;<span class="hljs-number">3</span>;i++)&#123;<br><br>&#125;<br></code></pre></td></tr></table></figure>



<h3 id="调试语句"><a href="#调试语句" class="headerlink" title="调试语句"></a>调试语句</h3><ul>
<li>debugger语句用于停止JS</li>
<li>debugger语句可以放在代码的任何位置用以脚本中止执行，但是不会关闭任何文件或者删除变量，类似在代码中设置断点</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-number">5</span>; i++) &#123;<br>    <span class="hljs-keyword">debugger</span>;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-number">1</span>);<br>&#125;<br></code></pre></td></tr></table></figure>





<h3 id="if语句"><a href="#if语句" class="headerlink" title="if语句"></a>if语句</h3><h5 id="单分支if"><a href="#单分支if" class="headerlink" title="单分支if"></a>单分支if</h5><ul>
<li>书写格式：<code>if (判断式)&#123;代码块&#125;</code></li>
<li>如果判断式为真，则执行代码块。</li>
<li>判断式不一定要书写各种操作符，无论传递什么进去，if都会把它转换成布尔值 然后执行if代码</li>
<li>一般有 （ 当。。。。的时候 否则。。。。的时候 ）使用if语句</li>
<li>if判断语句的代码块是单句，我们可以省略大括号(但是js中不建议这样书写)</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//【单分支if】声明变量 a、b，且赋值 a 和 b 都等于5；当 a 等于 b 时，重新对 b 赋值为10，并弹出 b 的新值</span><br><span class="hljs-keyword">var</span> a = <span class="hljs-number">5</span> , b = <span class="hljs-number">5</span> ;<br><span class="hljs-comment">// 如果a不等于b  那么整个if就不会执行  因为没有else</span><br><span class="hljs-comment">// js是允许只书写if  不书写else 的</span><br><span class="hljs-keyword">if</span> ( a == b )&#123;<br>    b = <span class="hljs-number">10</span>;<br>    <span class="hljs-title function_">alert</span>(b);<br>&#125;<br></code></pre></td></tr></table></figure>



<h5 id="双分支else语句"><a href="#双分支else语句" class="headerlink" title="双分支else语句"></a>双分支else语句</h5><ul>
<li><p>else语句仅在if或者else&#x2F;if语句的条件表达式为假的时候执行。</p>
</li>
<li><p><code>if（判断式）&#123;代码块1&#125;else&#123;代码块2&#125;</code></p>
</li>
<li><p>如果判断式为真，则执行语句1，否则将执行语句2</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//【双分支】声明变量 a赋值为100；当 a 大于 50 时，弹出“a真大”，否则弹出“a真小”</span><br><span class="hljs-keyword">var</span> a = <span class="hljs-number">100</span>;<br><span class="hljs-keyword">if</span> (a &gt; <span class="hljs-number">50</span>)&#123;<br>    <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;a真大&quot;</span>);<br>&#125;<span class="hljs-keyword">else</span>&#123;<br>    <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;a真小&quot;</span>);<br>&#125;<br><br><span class="hljs-comment">//【双分支】y值和x值相关。X大于等于3时，y值为2。X小于3时，y值为1</span><br><span class="hljs-keyword">var</span> y = <span class="hljs-number">4</span>,x = <span class="hljs-number">2</span>;<br><span class="hljs-keyword">if</span> (x &gt;= <span class="hljs-number">3</span>)&#123;<br>    y = <span class="hljs-number">2</span>;<br>&#125;<span class="hljs-keyword">else</span>&#123;<br>    y = <span class="hljs-number">1</span>;<br>&#125;<br><br><span class="hljs-comment">//【双分支】如果x大于y成立，则x值为y值加1，否则x值为y值减1</span><br><span class="hljs-keyword">var</span> x = <span class="hljs-number">3</span>,y = <span class="hljs-number">4</span>;<br><span class="hljs-keyword">if</span> (x &gt; y)&#123;<br>    x = y + <span class="hljs-number">1</span>;<br>&#125;<span class="hljs-keyword">else</span>&#123;<br>    x = y - <span class="hljs-number">1</span>;<br>&#125;<br><br><span class="hljs-comment">//【双分支】如果x大于y或者x小于z成立，则x值为z值，否则x值为y值</span><br><span class="hljs-keyword">var</span> x = <span class="hljs-number">1</span>,y = <span class="hljs-number">2</span>,z = <span class="hljs-number">3</span>;<br><span class="hljs-keyword">if</span> (x &gt; y || x &lt; z) &#123;<br>    x = z;<br>&#125;<span class="hljs-keyword">else</span>&#123;<br>    x = y;<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h5 id="else-if语句"><a href="#else-if语句" class="headerlink" title="else if语句"></a>else if语句</h5><ul>
<li>else if语句 可以构成多分支</li>
<li><code>if (条件表达式) &#123;语句1;&#125; else if (条件表达式) &#123;语句2;&#125; ... else &#123;语句3;&#125; </code></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 【多分支】如果x值为3，y值为2，如果x值大于3，y值为1，如果x值小于3，y值为4</span><br><span class="hljs-keyword">var</span> x = <span class="hljs-number">3</span>,y = <span class="hljs-number">4</span>;<br><span class="hljs-keyword">if</span> (x == <span class="hljs-number">3</span>)&#123;<br>    y = <span class="hljs-number">2</span>;<br>&#125;<span class="hljs-keyword">else</span>&#123;<br>    <span class="hljs-comment">// x不等3的情况 进入else</span><br>    <span class="hljs-keyword">if</span> (x &gt;<span class="hljs-number">3</span>)&#123;<br>        y = <span class="hljs-number">1</span>;<br>    &#125; <span class="hljs-keyword">else</span>&#123;<br>        y = <span class="hljs-number">4</span>;<br>    &#125;<br>&#125;<br><span class="hljs-comment">//else if()是在上一次判断的基础上 在剩下的条件中继续判断</span><br><span class="hljs-keyword">if</span> (x == <span class="hljs-number">3</span>)&#123;<br>    y = <span class="hljs-number">2</span>;<br>&#125;<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (x &gt; <span class="hljs-number">3</span>)&#123;<br>    y = <span class="hljs-number">1</span>;<br>&#125;<span class="hljs-keyword">else</span>&#123;<br>    y = <span class="hljs-number">4</span>;<br>&#125;<br><br><span class="hljs-comment">//【多分支】x值为2，y值为1，如果x值比2小，y值为0，如果x值比10大，y值为10，如果x值小于4且大于3，y值为5，其他情况y为3</span><br><span class="hljs-keyword">var</span> x = <span class="hljs-number">2</span>, y = <span class="hljs-number">1</span>;<br><span class="hljs-keyword">if</span> (x &lt; <span class="hljs-number">2</span>)&#123;<br>    y = <span class="hljs-number">0</span>;<br>&#125;<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (x &gt;<span class="hljs-number">10</span>)&#123;<br>    y = <span class="hljs-number">10</span>;<br>&#125;<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span>(x &lt; <span class="hljs-number">4</span> &amp;&amp; x &gt; <span class="hljs-number">3</span>)&#123;<br>    y = <span class="hljs-number">5</span>;<br>&#125;<span class="hljs-keyword">else</span>&#123;<br>    y = <span class="hljs-number">3</span>;<br>&#125;<br></code></pre></td></tr></table></figure>





<h3 id="switch语句"><a href="#switch语句" class="headerlink" title="switch语句"></a>switch语句</h3><ul>
<li><p>switch语句专门用来设计多分枝条件结构。与else&#x2F;if多分支结构相比，switch结构更加简介，执行效率更高。</p>
</li>
<li><p>语法如下：</p>
<p><code>switch（表达式）｛</code></p>
<p><code>case value1：语句1；break; case value2：语句2；break; ………… default：语句 &#125;</code></p>
<ul>
<li>switch语句根据表达式的支，一次与case后的表达式的value值进行比较。如果相等，则执行其后的语句段，只遇到break，或者switch语句结束才中止，如果不想等，则继续查找下一个case。</li>
<li>switch语句包含了一个可选的default语句(switch的异常处理)，如果前边的case没有找到相等的条件，则执行default语句，它与else语句类似。</li>
<li>switch语句是使用全等（&#x3D;&#x3D;&#x3D;）来检测两个只的相等与否。所以会有一个值类型的比较</li>
<li>case后可以是一个空语句，把多个条件放在一起检测</li>
<li>在switch语句中，case子句只是指明了执行的起点，但是没有指明终点，如果case后没有break语句，就会发生连续执行的情况，而忽略后边case的条件限制。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-number">6</span>;<br>    <span class="hljs-keyword">switch</span> (a) &#123;<br>        <span class="hljs-keyword">case</span> <span class="hljs-number">1</span>:<br>            <span class="hljs-title function_">alert</span>(<span class="hljs-number">1</span>);<br>            <span class="hljs-comment">// break;</span><br>        <span class="hljs-keyword">case</span> <span class="hljs-number">2</span>:<br>            <span class="hljs-title function_">alert</span>(<span class="hljs-number">2</span>);<br>            <span class="hljs-comment">// break;</span><br>        <span class="hljs-keyword">case</span> <span class="hljs-number">3</span>:<br>            <span class="hljs-title function_">alert</span>(<span class="hljs-number">3</span>);<br>            <span class="hljs-comment">// break;</span><br>        <span class="hljs-keyword">case</span> <span class="hljs-number">4</span>:<br>            <span class="hljs-title function_">alert</span>(<span class="hljs-number">4</span>);<br>            <span class="hljs-keyword">break</span>;<br>        <span class="hljs-keyword">case</span> <span class="hljs-number">5</span>:<br>        <span class="hljs-keyword">case</span> <span class="hljs-number">6</span>:<br>        <span class="hljs-keyword">case</span> <span class="hljs-number">7</span>:<br>            <span class="hljs-title function_">alert</span>(<span class="hljs-number">8</span>);<br>            <span class="hljs-keyword">break</span>;<br>        <span class="hljs-attr">default</span>:<br>            <span class="hljs-title function_">alert</span>(<span class="hljs-number">10</span>)<br>    &#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h3 id="循环语句"><a href="#循环语句" class="headerlink" title="循环语句"></a>循环语句</h3><h4 id="while语句"><a href="#while语句" class="headerlink" title="while语句"></a>while语句</h4><ul>
<li><p>while语句是最基本的循环结构。语法格式如下：</p>
<blockquote>
<p>while(判断式){</p>
<p> 语句</p>
<p>}</p>
</blockquote>
</li>
<li><p>当判断式为真的时候，执行语句。执行结束之后再次进行判断，直到判断式为假，才跳出循环。 </p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 用while()循环来计算1+2+3 ... +98+99+100的值。</span><br><br><span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>;<br><span class="hljs-keyword">var</span> num = <span class="hljs-number">0</span>;<br><span class="hljs-keyword">while</span>(i &lt;= <span class="hljs-number">100</span>)&#123;<br>    num += i;<br>    i ++;<br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num);<br><br><span class="hljs-comment">// 也可以在循环语句中添加增量</span><br><span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>;<br><span class="hljs-keyword">var</span> num = <span class="hljs-number">0</span>;<br><span class="hljs-keyword">while</span>(i++ &lt;= <span class="hljs-number">100</span>)&#123;<br>    num += i;<br>&#125;<br><br><span class="hljs-comment">//每次执行时，要让条件发生变化，否则将进入死循环</span><br><span class="hljs-keyword">var</span> a = <span class="hljs-number">4</span>;<br><span class="hljs-keyword">while</span>(a &lt; <span class="hljs-number">7</span>)&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a);<br>    a ++ ;<br>&#125;<br><br><span class="hljs-comment">// 将1-100之间  3的倍数找出来 并打印</span><br><span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>;<br><span class="hljs-keyword">while</span>(i &lt;= <span class="hljs-number">100</span>)&#123;<br>    <span class="hljs-keyword">if</span> (i % <span class="hljs-number">3</span> == <span class="hljs-number">0</span>)&#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(i);<br>    &#125;<br>    i++;<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h4 id="do-x2F-while语句"><a href="#do-x2F-while语句" class="headerlink" title="do&#x2F;while语句"></a>do&#x2F;while语句</h4><ul>
<li><p>do&#x2F;while与while循环非常相似，区别在与表达式的值是每次循环结束后去检查，而不是开始去检查。</p>
<blockquote>
<p>do{</p>
<p> 语句</p>
<p>}while(判断式子)</p>
</blockquote>
</li>
<li><p>因次do&#x2F;while循环能够保证至少执行一次循环。而while就不一定了。</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//基础使用</span><br><span class="hljs-keyword">var</span> a = <span class="hljs-number">3</span>;<br><span class="hljs-keyword">do</span>&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;hello&quot;</span>);<br>&#125;<span class="hljs-keyword">while</span>(a &lt; <span class="hljs-number">1</span>);<br><br><span class="hljs-comment">// 用do－while()循环来计算1+2+3 ... +98+99+100的值：</span><br><span class="hljs-keyword">var</span> i = <span class="hljs-number">1</span>;<br><span class="hljs-keyword">var</span> num = <span class="hljs-number">0</span>;<br><span class="hljs-keyword">do</span>&#123;<br>    num += i;<br>    i ++;<br>&#125;<span class="hljs-keyword">while</span>(i &lt;= <span class="hljs-number">100</span>);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num)<br></code></pre></td></tr></table></figure>



<h4 id="for语句"><a href="#for语句" class="headerlink" title="for语句"></a>for语句</h4><ul>
<li><p>for语句是一种更简洁的循环结构</p>
<blockquote>
<p>for（表达式1；表达式2；表达式3 )｛</p>
<p> 语句1；</p>
<p> 语句2……；</p>
<p>｝</p>
<p>语句3</p>
</blockquote>
</li>
<li><p>表达式1在循环开始前无条件的求值一次，而表达式2在每次循环开始前求值。如果表达式2的值为真，则执行循环语句，否则终止循环。表达式3在每次循环后被求值，然后再次判断</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">/*</span><br><span class="hljs-comment">    for循环执行顺序</span><br><span class="hljs-comment">    1、首先执行语句1</span><br><span class="hljs-comment">    2、执行判断式2 如果成立（返回true）则执行代码块  如果不成立（返回false） 整个循环结束</span><br><span class="hljs-comment">    3、如果判断式成立去执行了代码块，执行完代码块 会去执行语句3</span><br><span class="hljs-comment">    4、语句3执行完成后  再次去执行判断式2</span><br><span class="hljs-comment">    5、重复第二个步骤</span><br><span class="hljs-comment">*/</span><br><br><span class="hljs-comment">// 假设 弹出你好 总共弹出5次</span><br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-number">5</span>; i++) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;nei hao a&quot;</span>);<br>&#125;<br><br><span class="hljs-comment">// 练习：定义一个变量a=5,让a执行5次，每次a加3。然后弹出a最终的值。</span><br><span class="hljs-keyword">var</span> a = <span class="hljs-number">5</span>;<br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt;<span class="hljs-number">5</span> ; i++) &#123;<br>    a += <span class="hljs-number">3</span>;<br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a);<br></code></pre></td></tr></table></figure>





<h3 id="流程控制"><a href="#流程控制" class="headerlink" title="流程控制"></a>流程控制</h3><p>使用break、label、continue、return语句可以中途改变分支结构、循环结构的流程方向，以提升程序的执行效率。return在函数中会做详细讲解。</p>
<h4 id="label语句"><a href="#label语句" class="headerlink" title="label语句"></a>label语句</h4><ul>
<li><p>在JS中，label语句可以为一行语句添加标签，以方便在复杂的结构中设置跳转目标。</p>
</li>
<li><p>语法如下：<code>label:语句</code></p>
</li>
<li><p>label可以是任意合法的标识符，然后使用冒号分割标签名与标签语句。</p>
</li>
<li><p>label和break语句配合使用，主要应用在循环结构、多分枝结构中，以便与跳出内层嵌套体。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> num=<span class="hljs-number">0</span>;<br><span class="hljs-attr">outermost</span>:<br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>; i&lt;<span class="hljs-number">10</span>;i++)&#123;<br>    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> j=<span class="hljs-number">0</span>; j&lt;<span class="hljs-number">10</span>; j++)&#123;<br>        <span class="hljs-keyword">if</span>(i==<span class="hljs-number">5</span> &amp;&amp; j==<span class="hljs-number">5</span>)&#123;<br>            <span class="hljs-keyword">break</span> outermost;<br>        &#125;<br>        num++;<br>    &#125;<br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num);<br></code></pre></td></tr></table></figure></li>
</ul>
<h4 id="break语句"><a href="#break语句" class="headerlink" title="break语句"></a>break语句</h4><ul>
<li><p>break语句能够结束当前for、for&#x2F;in、while、do&#x2F;while或者switch语句的执行。同时break可以接受一个可选的标签名，来决定跳出的结构语句。</p>
</li>
<li><p>如果没有设置标签名，则跳出当前最内层结构。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//break 是立即退出循环 或 退出switch语句  执行循环后边的代码</span><br><span class="hljs-keyword">var</span>  num =<span class="hljs-number">0</span> ;<br><span class="hljs-keyword">for</span> ( <span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span> ; i&lt;<span class="hljs-number">5</span> ; i++ ) &#123;<br>    <span class="hljs-keyword">if</span> ( i == <span class="hljs-number">3</span> ) &#123;<br>        <span class="hljs-keyword">break</span>;<br>    &#125;<br>    num++;<br>&#125;<br><span class="hljs-title function_">alert</span>( num );<br><br><br><br><span class="hljs-keyword">var</span> num=<span class="hljs-number">0</span>;<br><span class="hljs-attr">outermost</span>:<br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>; i&lt;<span class="hljs-number">10</span>;i++)&#123;<br>    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> j=<span class="hljs-number">0</span>; j&lt;<span class="hljs-number">10</span>; j++)&#123;<br>        <span class="hljs-keyword">if</span>(i==<span class="hljs-number">5</span> &amp;&amp; j==<span class="hljs-number">5</span>)&#123;<br>            <span class="hljs-keyword">break</span> outermost;<br>        &#125;<br>        num++;<br>    &#125;<br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num);<br></code></pre></td></tr></table></figure></li>
</ul>
<h4 id="continue语句"><a href="#continue语句" class="headerlink" title="continue语句"></a>continue语句</h4><ul>
<li>continue语句用在循环结构内，用于跳出本次循环中剩余的代码，并在表达式的值为真的时候，继续执行下一次循环。</li>
<li>可以接受一个可选的标签名，来决定跳出的循环语句。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span>  num =<span class="hljs-number">0</span> ;<br><span class="hljs-keyword">for</span> ( <span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span> ; i&lt;<span class="hljs-number">5</span> ; i++ ) &#123;<br>    <span class="hljs-keyword">if</span> ( i == <span class="hljs-number">3</span> ) &#123;<br>        <span class="hljs-keyword">continue</span>;<br>    &#125;<br>    num++;<br>&#125;<br><span class="hljs-title function_">alert</span>( num );<br><br><br><span class="hljs-keyword">var</span> num=<span class="hljs-number">0</span>;<br><span class="hljs-attr">outermost</span>:<br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>; i&lt;<span class="hljs-number">10</span>;i++)&#123;<br>    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> j=<span class="hljs-number">0</span>; j&lt;<span class="hljs-number">10</span>; j++)&#123;<br>        <span class="hljs-keyword">if</span>(i==<span class="hljs-number">5</span> &amp;&amp; j==<span class="hljs-number">5</span>)&#123;<br>            <span class="hljs-keyword">continue</span> outermost;<br>        &#125;<br>        num++;<br>    &#125;<br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num);<br></code></pre></td></tr></table></figure>





<h3 id="异常处理"><a href="#异常处理" class="headerlink" title="异常处理"></a>异常处理</h3><p>ECMA-262规范了7种错误类型。其中Error是基类，其他6种错误类型是子类，都继承了基类。Error类型的主要作用是自定义错误对象。</p>
<ul>
<li>Error：普通异常 。与thorw语句和try&#x2F;catch语句一起使用，属性name可以读写异常类型，message属性可以读写详细的错误信息。</li>
<li>EvalError：不正确使用eval()方法时抛出</li>
<li>SyntaxError：出现语法错误时抛出</li>
<li>RangeError：数字超出合法范围之抛出</li>
<li>ReferenceError：读取不存在的变量时抛出</li>
<li>TypeError：值的类型发生错误的时候抛出</li>
<li>URIError：URI编码和解码错误时抛出</li>
</ul>
<h4 id="try-x2F-catch-x2F-finally语句"><a href="#try-x2F-catch-x2F-finally语句" class="headerlink" title="try&#x2F;catch&#x2F;finally语句"></a>try&#x2F;catch&#x2F;finally语句</h4><ul>
<li><p>try&#x2F;catch&#x2F;finally语句是异常处理语句</p>
<blockquote>
<p>try{</p>
<p> 调试代码块</p>
<p>}</p>
<p>catch(e){</p>
<p> 捕获异常，并进行异常处理的代码块</p>
<p>}</p>
<p>finally{</p>
<p> 后期清理代码块</p>
<p>}</p>
</blockquote>
</li>
<li><p>正常情况下，JS按顺序执行try子句中的代码，如果没有异常发生，将会忽略catch跳转到finally子句继续执行。</p>
</li>
<li><p>如果在try子句运行错误，或者使用throw语句主动抛出异常，则执行catch子句中的代码，同时传入一个参数，引用Error对象</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// try catch 案例</span><br><span class="hljs-keyword">try</span>&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a);<span class="hljs-comment">//当try中出现错误的时候，会直接进入catch执行</span><br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;我是try&quot;</span>);<br>&#125;<span class="hljs-keyword">catch</span> (e) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;catch&quot;</span>);<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e);<span class="hljs-comment">//referenceError:a is not defined</span><br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e.<span class="hljs-property">name</span>);<span class="hljs-comment">//referenceError</span><br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e.<span class="hljs-property">message</span>);<span class="hljs-comment">//a is not defined</span><br>&#125;<br><br><br><span class="hljs-keyword">try</span>&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;try&quot;</span>);<br>    <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">&quot;你是不是没有定义变量&quot;</span>);<br>&#125;<span class="hljs-keyword">catch</span> (e) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;catch&quot;</span>)<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e);<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e.<span class="hljs-property">name</span>);<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e.<span class="hljs-property">message</span>);<br>&#125;<br><br><br><br><span class="hljs-keyword">try</span>&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;try&quot;</span>);<br>    <span class="hljs-comment">// throw new Error(&quot;你是不是没有定义变量&quot;);</span><br>&#125;<span class="hljs-keyword">catch</span> (e) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;catch&quot;</span>)<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e);<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e.<span class="hljs-property">name</span>);<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e.<span class="hljs-property">message</span>);<br>&#125;<span class="hljs-keyword">finally</span> &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;finally&#x27;</span>)<br>&#125;<br><br><span class="hljs-title function_">alert</span>(<span class="hljs-number">1</span>);<br><br><span class="hljs-comment">// throw是抛出错误</span><br><span class="hljs-keyword">var</span> a = <span class="hljs-number">10</span>;<br><span class="hljs-keyword">if</span>(a &gt; <span class="hljs-number">4</span>)&#123;<br>    <span class="hljs-comment">// throw &quot;你错啦吗？&quot;;</span><br>    <span class="hljs-comment">// throw new TypeError(&quot;你的类型错误&quot;);</span><br>    <span class="hljs-keyword">var</span> userError = <span class="hljs-string">&quot;你今天犯错了，错误如下。。。。。。。。&quot;</span>;<br>    <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">SyntaxError</span>(userError);<br>&#125;<br></code></pre></td></tr></table></figure>





<h2 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h2><h3 id="函数调用"><a href="#函数调用" class="headerlink" title="函数调用"></a>函数调用</h3><p>JavasScipt供4种函数调用模式,函数调用,方法调用,使用call或apply动态调用(后边讲解),使用new间接调用</p>
<h3 id="函数的返回值"><a href="#函数的返回值" class="headerlink" title="函数的返回值"></a>函数的返回值</h3><ul>
<li>函数提供两个接口与外界的交互，其中参数作为入口，接受外界的信息。返回值作为出口，把运算结果反馈给外界。</li>
<li>在函数体内,使用return语句可以设置函数的返回值。一旦执行返回语句,将停止函数的运行,并运算和返回返回后面的表达式的值</li>
<li>如果函数不包含return语句,则执行完函数体内每条语句后,返回undefiend值。</li>
<li>JavaScript是一种弱类型语言,所以函数对接收和输出的值都没有类型限制,JavaSeript也不会自动检测输入和输出值的类型</li>
<li>可以返回一个计算值 也可以返回多个值（使用对象或者数组）</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><code class="hljs javascript"> <span class="hljs-keyword">function</span> <span class="hljs-title function_">fn1</span>(<span class="hljs-params">a,b</span>)&#123;<br>     <span class="hljs-keyword">var</span> sum = a + b;<br>     <span class="hljs-keyword">return</span> sum;<br>     <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;计算完毕&quot;</span>);<br> &#125;<br><span class="hljs-title function_">fn1</span>(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>);<span class="hljs-comment">//如果不用变量接受，或者是不使用，那么这个返回值是看不到的</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">fn1</span>(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>)+<span class="hljs-number">4</span>);<span class="hljs-comment">//7</span><br><br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">fn1</span>(<span class="hljs-params"></span>) &#123;<br>    <span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>;<br>    <span class="hljs-keyword">return</span> <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) &#123;<br>        <span class="hljs-title function_">alert</span>(a);<br>    &#125;<br>&#125;<br><span class="hljs-title function_">fn1</span>()();<br><span class="hljs-keyword">var</span> b = <span class="hljs-title function_">fn1</span>();<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(b);<br><span class="hljs-title function_">a</span>();<br><br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">teacherMessage</span>(<span class="hljs-params">name,age,sex</span>) &#123;<br>    <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我的名字是&quot;</span>+name);<br>    <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我的年龄是&quot;</span>+age);<br>    <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我的性别是&quot;</span>+sex);<br>&#125;<br><br><span class="hljs-keyword">var</span> teacher1 = &#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;lily&quot;</span>,<br>    <span class="hljs-attr">age</span>:<span class="hljs-string">&quot;18&quot;</span>,<br>    <span class="hljs-attr">sex</span>:<span class="hljs-string">&quot;nv&quot;</span><br>&#125;<br><span class="hljs-keyword">var</span> teacher2 = &#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;lily1&quot;</span>,<br>    <span class="hljs-attr">age</span>:<span class="hljs-string">&quot;128&quot;</span>,<br>    <span class="hljs-attr">sex</span>:<span class="hljs-string">&quot;nan&quot;</span><br>&#125;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">teacherMessage</span>(<span class="hljs-params">obj</span>) &#123;<br>    <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我的名字是&quot;</span>+obj.<span class="hljs-property">name</span>);<br>    <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我的年龄是&quot;</span>+obj.<span class="hljs-property">age</span>);<br>    <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;我的性别是&quot;</span>+obj.<span class="hljs-property">sex</span>);<br>&#125;<br><span class="hljs-title function_">teacherMessage</span>(teacher1);<br><br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">fn1</span>(<span class="hljs-params"></span>) &#123;<br>    <span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>;<br>    <span class="hljs-keyword">return</span>;<span class="hljs-comment">//返回的是undefined</span><br>    <span class="hljs-title function_">alert</span>(<span class="hljs-number">2</span>);<br>&#125;<br><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">fn1</span>());<br></code></pre></td></tr></table></figure>





<h3 id="函数的参数"><a href="#函数的参数" class="headerlink" title="函数的参数"></a>函数的参数</h3><h4 id="形参和实参"><a href="#形参和实参" class="headerlink" title="形参和实参"></a>形参和实参</h4><ul>
<li><strong>形参</strong>：在定义函数时，声明的参数变量仅在函数内部可见</li>
<li><strong>实参</strong>：在调用函数时，实际传入的值</li>
<li>一般情况下，函数的实参和形参的数量应该相同，但是JS并没有这样的要求。可以不相同</li>
<li>如果函数的实参数量少于形参数量，那么多出来的形参会默认会undefined</li>
<li>如果函数实参数量多余形参数量，那么多出来的实参就不能通过形参访问。函数忽略掉多余的实参。</li>
<li>可以设定形参默认值或者判断给值</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">f</span>(<span class="hljs-params">a,b</span>) &#123;<br><br>&#125;<br><span class="hljs-title function_">f</span>(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>);<br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">f2</span>(<span class="hljs-params">a,b,c</span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a,b,c);<span class="hljs-comment">//1 2 undefined</span><br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-keyword">typeof</span> c);<span class="hljs-comment">//undefined</span><br>&#125;<br><span class="hljs-title function_">f2</span>(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>);<br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">f3</span>(<span class="hljs-params">a,b,c</span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a,b,c)<br>&#125;<br><span class="hljs-title function_">f3</span>(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>,<span class="hljs-number">5</span>,<span class="hljs-number">6</span>,<span class="hljs-number">7</span>)<br><br><span class="hljs-comment">//书写一个函数 计算 三个值的和</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">add</span>(<span class="hljs-params">a,b,c</span>) &#123;<br>    <span class="hljs-keyword">return</span> a+b+c;<br>&#125;<br><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">add</span>(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>));<span class="hljs-comment">//NaN</span><br><br><br><span class="hljs-comment">//直接给函数形参默认值</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">add</span>(<span class="hljs-params">a,b,c=<span class="hljs-number">0</span></span>) &#123;<br>    <span class="hljs-keyword">return</span> a+b+c;<br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">add</span>(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>));<br><br><span class="hljs-comment">//判断参数是否存在，否则给出默认值</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">add</span>(<span class="hljs-params">a,b,c</span>) &#123;<br>    c = <span class="hljs-keyword">typeof</span> c === <span class="hljs-string">&quot;undefined&quot;</span> ? <span class="hljs-number">0</span> : c;<br>    <span class="hljs-keyword">typeof</span> c === <span class="hljs-string">&quot;undefined&quot;</span> ? c = <span class="hljs-number">0</span> : c;<br>    <span class="hljs-keyword">return</span> a+b+c;<br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">add</span>(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>));<span class="hljs-comment">//NaN</span><br></code></pre></td></tr></table></figure>



<h4 id="获取参数个数"><a href="#获取参数个数" class="headerlink" title="获取参数个数"></a>获取参数个数</h4><ul>
<li>使用arguments对象的length属性可以获取函数的实参个数。</li>
<li>argument对象只能在函数内可见,因此arguments.legth也只能在函数体内使用。</li>
<li>使用函数对象的length属性可以获取函数的形参个数,该属性为只读属性,在函数体内,体外都可以使用</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">add</span>(<span class="hljs-params">a,b,c</span>) &#123;<br>    <span class="hljs-title function_">alert</span>(add.<span class="hljs-property">length</span>)<span class="hljs-comment">//函数形参的个数</span><br>    <span class="hljs-title function_">alert</span>(argument.<span class="hljs-property">length</span>)<span class="hljs-comment">//获取实参的个数</span><br>    <span class="hljs-keyword">return</span> a+b+c;<br>&#125;<br><span class="hljs-title function_">alert</span>(add.<span class="hljs-property">length</span>)<span class="hljs-comment">//函数形参的个数</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">add</span>(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>));<br></code></pre></td></tr></table></figure>



<h4 id="使用arguments对象"><a href="#使用arguments对象" class="headerlink" title="使用arguments对象"></a>使用arguments对象</h4><ul>
<li><p>arguments对象表示函数的实参集合,仅能够在函数体内可见,并可以直接访间。</p>
</li>
<li><p>参数对象是一个伪类数组,不能够继承Array的原型方法。可以使用数组下标的形式访问每个实参,如参数[0]表示第一个实参</p>
</li>
<li><p>通过修改length属性值，可以改变函数的实参个数。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">fn1</span>(<span class="hljs-params">a,b,c</span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">arguments</span>.<span class="hljs-property">length</span>);<span class="hljs-comment">//获取实参的个数</span><br>&#125;<br><span class="hljs-title function_">fn1</span>(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>)<br><br><span class="hljs-comment">//输入一组数字，求平均值的函数</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">f</span>(<span class="hljs-params"></span>) &#123;<br>    <span class="hljs-comment">//先获取到所有的实参 使用arguments</span><br>    <span class="hljs-keyword">var</span> sum = <span class="hljs-number">0</span>;<br>    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>; i &lt; <span class="hljs-variable language_">arguments</span>.<span class="hljs-property">length</span>; i++) &#123;<br>        sum += <span class="hljs-variable language_">arguments</span>[i];<br>    &#125;<br>    <span class="hljs-keyword">return</span> sum / <span class="hljs-variable language_">arguments</span>.<span class="hljs-property">length</span>;<br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">f</span>(<span class="hljs-number">12</span>, <span class="hljs-number">34</span>, <span class="hljs-number">54</span>, <span class="hljs-number">32</span>, <span class="hljs-number">100</span>, <span class="hljs-number">98</span>, <span class="hljs-number">45</span>, <span class="hljs-number">34</span>, <span class="hljs-number">12</span>));<br><br><br><span class="hljs-comment">// 直接使用函数对象的length属性，就可以获取到函数的形参个数</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">f3</span>(<span class="hljs-params">a,b,c</span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(f3.<span class="hljs-property">length</span>);<span class="hljs-comment">//3</span><br>&#125;<br><span class="hljs-title function_">f3</span>(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>,<span class="hljs-number">5</span>,<span class="hljs-number">6</span>);<br><br><br><span class="hljs-comment">// 检测函数的形参和实参是否一致，如果不一致，则抛出错误</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">f4</span>(<span class="hljs-params">a,b,c,d</span>) &#123;<br>    <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">arguments</span>.<span class="hljs-property">length</span> != f4.<span class="hljs-property">length</span>) &#123;<br>        <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">&quot;参数不一致&quot;</span>);<br>    &#125;<span class="hljs-keyword">else</span>&#123;<br>        <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;go&quot;</span>)<br>    &#125;<br>&#125;<br><span class="hljs-title function_">f4</span>(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>,<span class="hljs-number">5</span>)<br></code></pre></td></tr></table></figure></li>
</ul>
<h4 id="使用callee"><a href="#使用callee" class="headerlink" title="使用callee"></a>使用callee</h4><p>callee是arguments对象的属性，它引用当前argument对象所在的函数，使用该属性可以在函数体内调用自身。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 检测函数的形参和实参是否一致，如果不一致，则抛出错误</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">f4</span>(<span class="hljs-params">a,b,c,d</span>) &#123;<br>    <span class="hljs-keyword">if</span> (<span class="hljs-variable language_">arguments</span>.<span class="hljs-property">length</span> != <span class="hljs-variable language_">arguments</span>.<span class="hljs-property">callee</span>.<span class="hljs-property">length</span>) &#123;<br>        <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">&quot;参数不一致&quot;</span>);<br>    &#125;<span class="hljs-keyword">else</span>&#123;<br>        <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;go&quot;</span>)<br>    &#125;<br>&#125;<br><span class="hljs-title function_">f4</span>(<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>,<span class="hljs-number">5</span>)<br><br><span class="hljs-keyword">var</span> a = <span class="hljs-number">0</span>;<br>(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>)&#123;<br>    a++;<br>    <span class="hljs-title function_">alert</span>(<span class="hljs-number">1</span>);<br>    <span class="hljs-keyword">if</span> (a &gt; <span class="hljs-number">1</span>)&#123;<br>        <span class="hljs-keyword">return</span>;<br>    &#125;<br>    <span class="hljs-variable language_">arguments</span>.<span class="hljs-title function_">callee</span>()<br>&#125;)();<br></code></pre></td></tr></table></figure>





<h2 id="函数的作用域"><a href="#函数的作用域" class="headerlink" title="函数的作用域"></a>函数的作用域</h2><h3 id="变量作用域"><a href="#变量作用域" class="headerlink" title="变量作用域"></a>变量作用域</h3><p>变量作用域（scope）是指变量在程序中可以访问的有效范围。也称为变量的可见性。分为全局变量和局部变量</p>
<ul>
<li>全局变量：变量在整个页面中都是可见的，可以被自由的访问</li>
<li>局部变量，变量仅能在声明的函数内部可见，函数外是不允许访问的。</li>
<li>var声明的作用与是按照函数划分的</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> a = <span class="hljs-number">1</span>;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">f</span>(<span class="hljs-params"></span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a);<br>&#125;<br><span class="hljs-title function_">f</span>();<br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">f2</span> ()&#123;<br>    <span class="hljs-keyword">var</span> a = <span class="hljs-number">2</span>;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">f3</span>(<span class="hljs-params"></span>) &#123;<br>        <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a);<br>    &#125;<br>    <span class="hljs-title function_">f3</span>();<br>&#125;<br><span class="hljs-comment">// f3();//f3是局部函数 外部使用不了的</span><br><span class="hljs-title function_">f2</span>();<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a);<br></code></pre></td></tr></table></figure>





<h3 id="执行上下文"><a href="#执行上下文" class="headerlink" title="执行上下文"></a>执行上下文</h3><ul>
<li>JS引擎并不是一行行的解析和执行代码，而是一段段的去分析和执行，当执行一段代码时，先开始预处理，比如声明提升和函数提升</li>
<li>在执行某段js代码的时候，会进行一个准备工作，这个准备工作用专业的说法 叫“执行上下文”，其实执行上下文也是在内存中开辟的一个空间</li>
<li>js可执行的代码分为3种类型， 全局代码 、 函数代码 、eval代码（忽略）</li>
<li>每执行一段代码，都会创建相对应的执行上下文，在脚本中可能存在多个执行上下文</li>
<li>因为有太多的执行上下文， JS创建了一个执行上下文栈（stack） 用来管理执行上下文</li>
<li>当js开始解析程序的时候，最先遇到的全局代码，此时向执行上下文栈中 压入一个全局执行上下文，全局的一定是在整体运行结束以后才被清空</li>
<li>当执行一个函数的时候 会创建一个函数的执行上下文，并压入到执行上下文栈中，只要函数执行完成，会将函数从栈里弹出</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">fun3</span>(<span class="hljs-params"></span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&quot;fun3&quot;</span>);<br>&#125;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">fun2</span>(<span class="hljs-params"></span>) &#123;<br>    <span class="hljs-title function_">fun3</span>();<br>&#125;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">fun1</span>(<span class="hljs-params"></span>) &#123;<br>    <span class="hljs-title function_">fun2</span>();<br>&#125;<br><span class="hljs-title function_">fun1</span>();<br><br><span class="hljs-comment">/*</span><br><span class="hljs-comment">      //用伪代码来实现上边代码执行上下文的流程</span><br><span class="hljs-comment">      //1.js引擎创建了一个执行上下文栈</span><br><span class="hljs-comment">      var Stack = [];</span><br><span class="hljs-comment">      //2.向栈中押入 全局执行上下文</span><br><span class="hljs-comment">      Stack = [globalContext]</span><br><span class="hljs-comment">      //3.在fun1中创建执行上下文  并压入栈中</span><br><span class="hljs-comment">      Stack.push(&lt;fun1&gt;Context)</span><br><span class="hljs-comment">      //4.在fun2中创建执行上下文  并压入栈中</span><br><span class="hljs-comment">      Stack.push(&lt;fun2&gt;Context)</span><br><span class="hljs-comment">      //5.在fun3中创建执行上下文  并压入栈中</span><br><span class="hljs-comment">      Stack.push(&lt;fun3&gt;Context)</span><br><span class="hljs-comment">      //6.fun3执行完毕</span><br><span class="hljs-comment">      Stack.pop();</span><br><span class="hljs-comment">      //7.fun2执行完毕</span><br><span class="hljs-comment">      Stack.pop();</span><br><span class="hljs-comment">      //8.fun1执行完毕</span><br><span class="hljs-comment">      Stack.pop();</span><br><span class="hljs-comment">      //9整体代码执行结束  全局执行上下文出去</span><br><span class="hljs-comment">*/</span><br><br><span class="hljs-keyword">var</span> scope = <span class="hljs-string">&quot;hello&quot;</span>;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">checkscope</span>(<span class="hljs-params"></span>) &#123;<br>    <span class="hljs-keyword">var</span> scope = <span class="hljs-string">&quot;world&quot;</span>;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">f</span>(<span class="hljs-params"></span>) &#123;<br>        <span class="hljs-keyword">return</span> scope;<br>    &#125;<br>    <span class="hljs-keyword">return</span> <span class="hljs-title function_">f</span>();<br>&#125;<br><span class="hljs-title function_">checkscope</span>();<br><span class="hljs-comment">/*</span><br><span class="hljs-comment">    var Stack = [globalContext];</span><br><span class="hljs-comment">    Stack.push(&lt;checkscope&gt;Context);</span><br><span class="hljs-comment">    Stack.push(&lt;f&gt;Context);</span><br><span class="hljs-comment">    Stack.pop()</span><br><span class="hljs-comment">    Stack.pop()</span><br><span class="hljs-comment">*/</span><br></code></pre></td></tr></table></figure>





<h3 id="变量对象"><a href="#变量对象" class="headerlink" title="变量对象"></a>变量对象</h3><ul>
<li>每个执行上下文 都有三个重要属性：1.变量对象（VO） 2.作用域链 3.this</li>
<li>变量对象是 ECMAScript规范术语。在一个执行上下文中,变量对象才被激活,只有激活的变量对象,其各种属性才能被访问</li>
<li>变量对象是与执行上下文相关的数据作用域，储存了在上下文中定义的变量和函数声明</li>
</ul>
<h4 id="全局上下文的变量对象"><a href="#全局上下文的变量对象" class="headerlink" title="全局上下文的变量对象"></a>全局上下文的变量对象</h4><ul>
<li><code>window</code>是预定义对象，作为JS全局函数和全局属性的占位符（全局的变量和函数就是window对象属性和方法）</li>
<li>全局执行上下文的变量对象其实就是全局对象window</li>
</ul>
<h4 id="函数上下文的变量对象"><a href="#函数上下文的变量对象" class="headerlink" title="函数上下文的变量对象"></a>函数上下文的变量对象</h4><ul>
<li>进入执行上下文 不会立马执行代码，只进行分析。此时首先第一步，变量对象包括了函数所有的形参和实参</li>
<li>检查所有声明的函数，由名称和对应值 组成一个变量对象的属性 被创建。如果变量对象已经有相同名字的属性，则完全替换</li>
<li>检查所有的声明的变量，创建键值对儿</li>
<li>变成变量对象的属性，如果变量名和已经声明的形参或函数相同，则变量声明不会干扰已经存在的这类属性</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">foo</span>(<span class="hljs-params">a</span>) &#123;<br>    <span class="hljs-keyword">var</span> b = <span class="hljs-number">2</span>;<br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">c</span>(<span class="hljs-params"></span>) &#123;&#125;<br>    <span class="hljs-keyword">var</span> d = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) &#123;&#125;;<br>    b = <span class="hljs-number">3</span>;<br>&#125;<br><span class="hljs-title function_">foo</span>(<span class="hljs-number">1</span>, <span class="hljs-number">2</span>);<br><br><span class="hljs-comment">//模拟以上代码的变量对象：</span><br><span class="hljs-keyword">var</span> <span class="hljs-variable constant_">AO</span> = &#123;<br>    <span class="hljs-comment">//arguments是保存所有的的实参</span><br>    <span class="hljs-attr">arguments</span>:&#123;<br>        <span class="hljs-number">0</span>:<span class="hljs-number">1</span>,<br>        <span class="hljs-number">1</span>:<span class="hljs-number">2</span>,<br>        <span class="hljs-attr">length</span>:<span class="hljs-number">2</span><br>    &#125;,<br>    <span class="hljs-attr">a</span>:<span class="hljs-number">1</span>,<br>    <span class="hljs-attr">c</span>:<span class="hljs-keyword">function</span> <span class="hljs-title function_">c</span>(<span class="hljs-params"></span>)&#123;&#125;,<br>    <span class="hljs-attr">b</span>:<span class="hljs-literal">undefined</span>,<br>    <span class="hljs-attr">d</span>:<span class="hljs-literal">undefined</span><br>&#125;<br><br><span class="hljs-comment">//练习</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">fn1</span>(<span class="hljs-params">a</span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a); <span class="hljs-comment">//1</span><br>    <span class="hljs-keyword">var</span> a = <span class="hljs-number">2</span>;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(a); <span class="hljs-comment">//2</span><br>&#125;<br><span class="hljs-title function_">fn1</span>(<span class="hljs-number">1</span>);<br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">fn2</span>(<span class="hljs-params"></span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(foo); <span class="hljs-comment">//函数</span><br>    <span class="hljs-keyword">function</span> <span class="hljs-title function_">foo</span>(<span class="hljs-params"></span>) &#123;&#125;<br>    <span class="hljs-keyword">var</span> foo = <span class="hljs-number">1</span>;<br>&#125;<br><span class="hljs-title function_">fn2</span>();<br></code></pre></td></tr></table></figure>



<h3 id="作用域链"><a href="#作用域链" class="headerlink" title="作用域链"></a>作用域链</h3><ul>
<li>当代码在一个环境中执行时,会创建变量对象的一个作用域链( scope chain),作用域链的用途,是保证对执行环境有权访问的所有变量和函数的有序访问。</li>
<li>作用域链的前端,始终都是当前执行的代码所在环境的变量对象。</li>
<li>全局执行环境的变量对象始终都是作用域链中的最后一个对象。</li>
<li>标识符解析是沿着作用域链一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始，然后逐级地向后回溯,直至找到标识符为止(如果找不到标识符,通常会导致错误发生)</li>
</ul>
<h3 id="this和调用对象"><a href="#this和调用对象" class="headerlink" title="this和调用对象"></a>this和调用对象</h3><ul>
<li>javascript函数的作用域是静态的,但是函数的调用却是动态的,由于函数可以在不同的运行环境内执行,因此 JavaScript在函数体内定义了this关键字,用来获取当前的运行环境。</li>
<li>this是一个指针型变量,它动态引用当前的运行环境,具体来说,就是调用函数的对象。</li>
<li>this永远指向其所在函数的调用者，如果没有所有者则指向全局对象window</li>
</ul>
<h4 id="this的指向方式"><a href="#this的指向方式" class="headerlink" title="this的指向方式"></a>this的指向方式</h4><p><strong>默认绑定</strong> ：常用的函数调用类型：独立函数调用</p>
<p>可以把这个规则看作是无法应用其他规则的时候 默认的规则，基本指向的是window</p>
<p><strong>隐式绑定</strong></p>
<p>当函数引用有上下文对象的时候（obj），隐式绑定规则会把函数中的this绑定到这个上下文对象上</p>
<p>隐式绑定可能会出现隐式丢失的问题 ：被隐式绑定的函数，会丢失了绑定对象</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">foo</span>(<span class="hljs-params"></span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">a</span>);<br>&#125;<br><span class="hljs-keyword">var</span> obj = &#123;<br>    <span class="hljs-attr">a</span>: <span class="hljs-number">2</span>,<br>    <span class="hljs-attr">foo</span>: foo,<br>&#125;;<br><span class="hljs-keyword">var</span> fn1 = obj.<span class="hljs-property">foo</span>;<br><span class="hljs-keyword">var</span> a = <span class="hljs-string">&quot;hello&quot;</span>;<br><span class="hljs-title function_">fn1</span>(); <span class="hljs-comment">//hello 虽然fn1是obj.foo的一个引用，但是实际上它的引用是foo函数本身，因此fn1其实是一个不带任何修饰的函数调用，属于默认绑定</span><br><br><span class="hljs-comment">//</span><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">foo</span>(<span class="hljs-params"></span>) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">a</span>);<br>&#125;<br><span class="hljs-keyword">function</span> <span class="hljs-title function_">doFoo</span>(<span class="hljs-params">fn</span>) &#123;<br>    <span class="hljs-title function_">fn</span>(); <span class="hljs-comment">//传参也是隐式赋值，所以传递函数也是隐式赋值，赋值的是foo函数本身</span><br>&#125;<br><span class="hljs-keyword">var</span> obj = &#123;<br>    <span class="hljs-attr">a</span>: <span class="hljs-number">2</span>,<br>    <span class="hljs-attr">foo</span>: foo,<br>&#125;;<br><span class="hljs-title function_">doFoo</span>(obj.<span class="hljs-property">foo</span>);<br></code></pre></td></tr></table></figure>

<p><strong>new绑定</strong></p>
<p>构造函数只是一些使用new操作符被调用的函数,使用new调用函数的时候，会构造一新的对象，这个时候 就把新的对象绑定给了函数的this上</p>
<h4 id="判断this指向"><a href="#判断this指向" class="headerlink" title="判断this指向"></a>判断this指向</h4><ol>
<li>函数是否在new中调用，如果是的话，this绑定的是新创建的对象</li>
<li>函数是否通过call、apply（显示绑定）调用，如果是，则this绑定的是执行的对象</li>
<li>函数是否在某个上下文对象中调用(隐式绑定)，如果有，则this绑定在这个上下文对象上</li>
<li>如果以上都不是 则默认绑定 执行window</li>
</ol>
<h2 id="Js对象"><a href="#Js对象" class="headerlink" title="Js对象"></a>Js对象</h2><h3 id="定义对象"><a href="#定义对象" class="headerlink" title="定义对象"></a>定义对象</h3><h4 id="构造函数"><a href="#构造函数" class="headerlink" title="构造函数"></a>构造函数</h4><ul>
<li>使用new运算符调用构造函数,可以构造一个实例对象,具体用法如下<code>var objectName = new functionName (args)</code></li>
<li>参数说明如下<ul>
<li>objectName:返回的实例对象</li>
<li>functionName:构造函数,与普通函数基本相同</li>
<li>args:实例对象初始化配置参数列表</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> num1 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Number</span>(<span class="hljs-number">111</span>);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num1);<br><br><span class="hljs-keyword">var</span> obj = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>(&#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-number">1</span><br>&#125;);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj);<br></code></pre></td></tr></table></figure>



<h4 id="对象直接量"><a href="#对象直接量" class="headerlink" title="对象直接量"></a>对象直接量</h4><ul>
<li>使用直接量可以快速定义对象,也是最高效、最简便的方法。<code>var objectName = &#123;属性名1:属性值1,属性名n:属性值&#125;</code></li>
<li>在对象直接量中,属性名与属性值之间通过冒号进行分隔,属性值可以是任意类型的数据,属性名可以是 JavaScript标识符,或者是字符串型表达式,属性与属性之间通过逗号进行分隔,最后一个属性末尾不需要逗号。</li>
<li>如果属性值是对象,可以设计嵌套结构的对象</li>
<li>如果不包含任何属性,则可以定义一个空对象</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> obj1 = &#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;lily&quot;</span>,<br>    <span class="hljs-string">&quot;sex&quot;</span>:<span class="hljs-string">&quot;女&quot;</span>,<br>    <span class="hljs-attr">score</span>:[<span class="hljs-number">100</span>,<span class="hljs-number">90</span>,<span class="hljs-number">80</span>,<span class="hljs-number">12</span>,<span class="hljs-number">35</span>,<span class="hljs-number">34</span>],<br>    <span class="hljs-attr">fri</span>:&#123;<br>        <span class="hljs-attr">fir1</span>:<span class="hljs-string">&quot;xiaowang&quot;</span>,<br>        <span class="hljs-attr">fir2</span>:<span class="hljs-string">&quot;xiaoli&quot;</span>,<br>        <span class="hljs-attr">fir3</span>:&#123;<br>            <span class="hljs-attr">sis1</span>:<span class="hljs-string">&quot;dahua&quot;</span>,<br>            <span class="hljs-attr">sis2</span>:<span class="hljs-string">&quot;xiaohua&quot;</span>,<br>            <span class="hljs-attr">sis3</span>:[<span class="hljs-string">&quot;zhangdama&quot;</span>,<span class="hljs-string">&quot;zhangxiaoma&quot;</span>,<span class="hljs-string">&quot;zhangma&quot;</span>]<br>        &#125;<br>    &#125;<br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj1.<span class="hljs-property">sex</span>);<br></code></pre></td></tr></table></figure>



<h4 id="使用object-create"><a href="#使用object-create" class="headerlink" title="使用object.create"></a>使用object.create</h4><ul>
<li><p>Object.create是 ECMAScript5新增的一个静态方法,用来定义一个实例对象。</p>
</li>
<li><p>该方法可以指定对象的原型和对象特性。具体用法如下</p>
<figure class="highlight elm"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs elm"><span class="hljs-title">object</span>.create (proto<span class="hljs-keyword">type</span>, descriptors)<br></code></pre></td></tr></table></figure>

<ul>
<li>prototype:必须参数,指定原型对象,可以为null</li>
<li>descriptors可选参数,包含一个或多个属性描述符的 JavaScript对象。属性描述符包含数据特性和访问器特性,其中数据特性说明如下<ul>
<li>value:指定属性值</li>
<li>writable:默认为 false,设置属性值是否可写</li>
<li>enumerable:默认为 false,设置属性是否可枚举( for&#x2F;in)</li>
<li>onfigurable:默认为flse,设置是否可修改属性特性和删除属性</li>
<li>访问器特性包含两个方法,简单说明如下set():设置属性值,get():返回属性值</li>
</ul>
</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//Object.create方法</span><br><span class="hljs-keyword">var</span> obj = &#123;&#125;;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj);<br><br><span class="hljs-keyword">var</span> obj2 = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">create</span>(obj1);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj2);<span class="hljs-comment">//空对象  但是继承了obj1</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj2.<span class="hljs-property">name</span>);<span class="hljs-comment">//自己没有没关系  他爹有</span><br><br><span class="hljs-comment">//创建一个干净的对象</span><br><span class="hljs-keyword">var</span> obj3 = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">create</span>(<span class="hljs-literal">null</span>);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj3);<br><br><span class="hljs-comment">//创建一个对象</span><br><span class="hljs-keyword">var</span> obj4 = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">create</span>(<span class="hljs-literal">null</span>,&#123;<br>    <span class="hljs-attr">name</span>:&#123;<br>        <span class="hljs-attr">value</span>:<span class="hljs-string">&quot;xiaowang&quot;</span>,<br>        <span class="hljs-attr">writable</span>:<span class="hljs-literal">true</span>,<br>        <span class="hljs-attr">enumerable</span>:<span class="hljs-literal">true</span>,<br>    &#125;,<br>    <span class="hljs-attr">sex</span>:&#123;<br>        <span class="hljs-attr">value</span>:<span class="hljs-string">&quot;nv&quot;</span><br>    &#125;<br>&#125;)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj4);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj4.<span class="hljs-property">name</span>);<br>obj4.<span class="hljs-property">name</span> = <span class="hljs-string">&quot;laowang&quot;</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj4);<br><br><span class="hljs-keyword">for</span>(i <span class="hljs-keyword">in</span> obj4)&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(i);<br>&#125;<br><br><br><span class="hljs-comment">//访问器属性</span><br><span class="hljs-keyword">var</span> obj5 = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">create</span>(<span class="hljs-literal">null</span>,&#123;<br>    <span class="hljs-attr">a</span>:&#123;<br>        <span class="hljs-attr">value</span>:<span class="hljs-string">&quot;hello&quot;</span>,<br>        <span class="hljs-attr">writable</span>:<span class="hljs-literal">true</span><br>    &#125;,<br>    <span class="hljs-attr">b</span>:&#123;<br>        <span class="hljs-attr">get</span>:<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) &#123;<br>            <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">a</span>+<span class="hljs-string">&quot; world&quot;</span><br>        &#125;,<br>        <span class="hljs-attr">set</span>:<span class="hljs-keyword">function</span> (<span class="hljs-params">i</span>) &#123;<br>            <span class="hljs-variable language_">this</span>.<span class="hljs-property">a</span> = i + <span class="hljs-string">&quot;我拖堂了&quot;</span>;<br>        &#125;<br>    &#125;<br>&#125;)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj5);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj5.<span class="hljs-property">b</span>);<span class="hljs-comment">//当调用一个属性的时候，会访问他的访问器属性的get，get方法的返回值就是b的值</span><br>obj5.<span class="hljs-property">b</span> = <span class="hljs-string">&quot;hahaha&quot;</span>;<span class="hljs-comment">//当设置属性的时候，会调用访问器的set方法，设置的值就是方法的参数</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj5);<br></code></pre></td></tr></table></figure>



<h3 id="对象属性的操作"><a href="#对象属性的操作" class="headerlink" title="对象属性的操作"></a>对象属性的操作</h3><h4 id="定义属性"><a href="#定义属性" class="headerlink" title="定义属性"></a>定义属性</h4><p>在对象直接量中,属性名与属性值之间通过冒号分隔,冒号左侧是属性名,右侧是属性值,名值对(属性)之间通过逗号分隔。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//使用直接量定义</span><br><span class="hljs-keyword">var</span> obj1 = &#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;laowang&quot;</span>,<br>    <span class="hljs-attr">sex</span>:<span class="hljs-string">&quot;男&quot;</span><br>&#125;;<br><span class="hljs-keyword">var</span> obj2 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>(&#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;xiaowang&quot;</span>,<br>    <span class="hljs-attr">sex</span>:<span class="hljs-string">&quot;nv&quot;</span><br>&#125;)<br><span class="hljs-keyword">var</span> obj3 = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">create</span>(<span class="hljs-literal">null</span>,&#123;<br>    <span class="hljs-attr">name</span>:&#123;<br>        <span class="hljs-attr">value</span>:<span class="hljs-string">&quot;dawang&quot;</span>,<br>        <span class="hljs-attr">writable</span>:<span class="hljs-literal">true</span><br>    &#125;,<br>    <span class="hljs-attr">sex</span>:&#123;<br>        <span class="hljs-attr">value</span>:<span class="hljs-string">&quot;nan&quot;</span><br>    &#125;<br>&#125;)<br></code></pre></td></tr></table></figure>



<h4 id="点语法定义"><a href="#点语法定义" class="headerlink" title="点语法定义"></a>点语法定义</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//点语法定义：</span><br><span class="hljs-keyword">var</span> obj4 = &#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;xiaozhang&quot;</span><br>&#125;<br>obj4.<span class="hljs-property">sex</span> = <span class="hljs-string">&quot;nan&quot;</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj4);<br><br><span class="hljs-keyword">var</span> obj5 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Object</span>(&#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;xiaowang&quot;</span>,<br>    <span class="hljs-attr">sex</span>:<span class="hljs-string">&quot;nv&quot;</span><br>&#125;)<br>obj5.<span class="hljs-property">age</span> = <span class="hljs-number">20</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj5);<br><br><span class="hljs-keyword">var</span> obj6 = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">create</span>(<span class="hljs-literal">null</span>,&#123;<br>    <span class="hljs-attr">name</span>:&#123;<br>        <span class="hljs-attr">value</span>:<span class="hljs-string">&quot;dazhang&quot;</span>,<br>        <span class="hljs-attr">writable</span>:<span class="hljs-literal">true</span>,<br>    &#125;<br>&#125;)<br>obj6.<span class="hljs-property">age</span> = <span class="hljs-number">10</span>;<span class="hljs-comment">//也可以直接对 create创建的对象设置属性，但是无法选择属性的特性，默认可以被修改,可以被枚举</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj6);<br>obj6.<span class="hljs-property">age</span> = <span class="hljs-number">20</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj6);<br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i <span class="hljs-keyword">in</span> obj6)&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(i);<br>&#125;<br></code></pre></td></tr></table></figure>



<h4 id="中括号语法"><a href="#中括号语法" class="headerlink" title="中括号语法"></a>中括号语法</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> obj7 = &#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;xiaowang&quot;</span><br>&#125;<br><span class="hljs-keyword">var</span>  a= <span class="hljs-string">&quot;sex&quot;</span><br>obj7[a] = <span class="hljs-string">&quot;nv&quot;</span>;<br>obj7[<span class="hljs-string">&quot;sex&quot;</span>] = <span class="hljs-string">&quot;nv&quot;</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj7);<br><br><br><span class="hljs-keyword">function</span> <span class="hljs-title function_">getMess</span>(<span class="hljs-params">obj,pro</span>) &#123;<br>    <span class="hljs-keyword">return</span> obj[pro]<br>&#125;<br><span class="hljs-keyword">var</span> myself = &#123;<span class="hljs-attr">name</span>:<span class="hljs-string">&quot;huahua&quot;</span>,<span class="hljs-attr">sex</span>:<span class="hljs-string">&quot;nan&quot;</span>,<span class="hljs-attr">age</span>:<span class="hljs-string">&quot;19&quot;</span>&#125;;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title function_">getMess</span>(myself, <span class="hljs-string">&quot;sex&quot;</span>));<br></code></pre></td></tr></table></figure>





<h4 id="object原型的一些方法"><a href="#object原型的一些方法" class="headerlink" title="object原型的一些方法"></a>object原型的一些方法</h4><p><strong>object.defineProperty</strong></p>
<p>使用 Object.defineProperty函数可以为对象添加属性,或者修改现有属性。如果指定的属性名在对象中不存在,则执行添加操作:如果在对象中存在同名属性,则执行修改操作</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// Object.defineProperty（obj,pro,&#123;&#125;）</span><br><span class="hljs-keyword">var</span> obj8 = &#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;xiaoli&quot;</span><br>&#125;<br><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">defineProperty</span>(obj8,<span class="hljs-string">&quot;sex&quot;</span>,&#123;<br>    <span class="hljs-attr">value</span>:<span class="hljs-string">&quot;nv&quot;</span>,<br>&#125;);<br><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">defineProperty</span>(obj8,<span class="hljs-string">&quot;name&quot;</span>,&#123;<br>    <span class="hljs-comment">//如果修改原有的name属性值，它可以被修改和枚举</span><br>    <span class="hljs-attr">value</span>:<span class="hljs-string">&quot;dali&quot;</span>,<br>&#125;);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj8);<br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i <span class="hljs-keyword">in</span> obj8)&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(i);<br>&#125;<br></code></pre></td></tr></table></figure>



<p><strong>object.defineProperties</strong></p>
<ul>
<li>可以一次定义多个属性</li>
<li>Object.defineProperties(object,description)<ul>
<li>object:对其添加或修改属性的对象,可以是本地对象或DOM对象</li>
<li>description:包含一个或多个描述符对象,每个描述符对象描述一个数据属性或访问器属性</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> obj9 = &#123;<br>    <span class="hljs-attr">like</span>:<span class="hljs-string">&quot;miantiao&quot;</span><br>&#125;<br><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">defineProperties</span>(obj9,&#123;<br>    <span class="hljs-attr">color</span>:&#123;<br>        <span class="hljs-attr">value</span>:<span class="hljs-string">&quot;yellow&quot;</span>,<br>        <span class="hljs-attr">enumerable</span>:<span class="hljs-literal">true</span><br>    &#125;,<br>    <span class="hljs-attr">length</span>:&#123;<br>        <span class="hljs-attr">value</span>:<span class="hljs-string">&quot;10m&quot;</span>,<br>    &#125;<br>&#125;)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj9);<br></code></pre></td></tr></table></figure>



<p><strong>object.getOwnPropertyNames</strong></p>
<ul>
<li>使用 Object.getOwnPropertyNames函数能够返回指定对象私有属性的名称。</li>
<li>私有属性是指用户在本地定义的属性,而不是继承的原型属性。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> obj1 = &#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;xiaowang&quot;</span>,<br>    <span class="hljs-attr">like</span>:<span class="hljs-string">&quot;唱跳rap篮球&quot;</span>,<br>    <span class="hljs-attr">time</span>:<span class="hljs-string">&quot;两年半&quot;</span><br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">getOwnPropertyNames</span>(obj1));<span class="hljs-comment">//[&quot;name&quot;,&quot;like&quot;,&quot;time&quot;]</span><br></code></pre></td></tr></table></figure>



<p><strong>object.keys</strong>()</p>
<p>使用 Object.keys()函数仅能获取可枚举的私有属性名称,返回值是一个数组,其中包含对象的可枚举属性名称</p>
<p><strong>object.getOwnPropertyDescriptor</strong></p>
<ul>
<li>能够获取对象属性的描述符</li>
<li>Object.getOwnPropertyDescriptor(object,propertyname)</li>
<li>参数object表示指定的对象，propertyname表示属性的名称，返回值为属性的描述符对象</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//对 create方法创建的对象 进行属性设置</span><br><span class="hljs-keyword">var</span> obj2 = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">create</span>(<span class="hljs-literal">null</span>,&#123;<br>    <span class="hljs-attr">name</span>:&#123;<br>        <span class="hljs-attr">value</span>:<span class="hljs-string">&quot;新宝岛&quot;</span>,<br>        <span class="hljs-attr">enumerable</span>:<span class="hljs-literal">true</span><br>    &#125;,<br>    <span class="hljs-attr">time</span>:&#123;<br>        <span class="hljs-attr">value</span>:<span class="hljs-string">&quot;5min&quot;</span>,<br>        <span class="hljs-attr">enumerable</span>:<span class="hljs-literal">true</span><br>    &#125;,<br>    <span class="hljs-attr">like</span>:&#123;<br>        <span class="hljs-attr">value</span>:<span class="hljs-string">&quot;rap&quot;</span><br>    &#125;<br><br>&#125;)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">getOwnPropertyNames</span>(obj2));<span class="hljs-comment">//[&quot;name&quot;,&quot;like&quot;,&quot;time&quot;]</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">keys</span>(obj2));<span class="hljs-comment">//[&quot;name&quot;,&quot;time&quot;]</span><br><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">getOwnPropertyDescriptor</span>(obj1, <span class="hljs-string">&quot;like&quot;</span>));<span class="hljs-comment">//&#123;value: &quot;唱跳rap篮球@&quot;, writable: true, enumerable: true, configurable: true&#125;</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">getOwnPropertyDescriptor</span>(obj2, <span class="hljs-string">&quot;time&quot;</span>));<span class="hljs-comment">//&#123;value: &quot;5min&quot;, writable: false, enumerable: true, configurable: false&#125;</span><br></code></pre></td></tr></table></figure>



<h4 id="删除属性"><a href="#删除属性" class="headerlink" title="删除属性"></a>删除属性</h4><p>使用 delete运算符可以删除对象的属性 当删除对象属性之后,不是将该属性值设置为 undefined,而是从对象中彻底清除属性</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> obj = &#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;laowang&quot;</span>,<br>    <span class="hljs-attr">sex</span>:<span class="hljs-string">&quot;nan&quot;</span>,<br>    <span class="hljs-attr">like</span>:<span class="hljs-literal">undefined</span><br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj.<span class="hljs-property">like</span>);<span class="hljs-comment">//可以设置一个属性值为undefined</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">getOwnPropertyNames</span>(obj));<span class="hljs-comment">//设置为undefined值的属性名 仍然可以获取到</span><br><br><span class="hljs-keyword">delete</span> obj.<span class="hljs-property">sex</span>;<span class="hljs-comment">//删除一个属性</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">getOwnPropertyNames</span>(obj));<span class="hljs-comment">//当一个属性被删除的话，就枚举不到他的这个属性名了</span><br></code></pre></td></tr></table></figure>





<h3 id="控制对象的状态"><a href="#控制对象的状态" class="headerlink" title="控制对象的状态"></a>控制对象的状态</h3><ul>
<li>Object.preventExtensions():阻止为对象添加新的属性</li>
<li>Object.seal():阻止为对象添加新的属性,同时也无法删除旧属性。等价于把属性描述对象的configurable属性设为false。注意,该方法不影响修改某个属性的值</li>
<li>Object.freeze():阻止为一个对象添加新属性、删除旧属性、修改属性值 同时提供3个对应的辅助检查函数</li>
<li>Object.isExtensible():检查一个对象是否允许添加新的属性</li>
<li>Object.isSealed():检查一个对象是否使用了 Object.seal方法</li>
<li>Object.isFrozen():检查一个对象是否使用了 Object.freeze方法</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 1.Object.preventExtensions():</span><br><span class="hljs-keyword">var</span> obj = &#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;xiaoxinxin&quot;</span>,<br>    <span class="hljs-attr">width</span>:<span class="hljs-string">&quot;200&quot;</span>,<br>    <span class="hljs-attr">height</span>:<span class="hljs-string">&quot;300&quot;</span><br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj);<br>obj.<span class="hljs-property">color</span> = <span class="hljs-string">&quot;red&quot;</span>;<span class="hljs-comment">//设置新属性</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">isExtensible</span>(obj));<br><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">preventExtensions</span>(obj);<span class="hljs-comment">//阻止设置新属性</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">isExtensible</span>(obj));<br>obj.<span class="hljs-property">bg</span> = <span class="hljs-string">&quot;green&quot;</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj);<span class="hljs-comment">//阻止以后 无法设置新属性</span><br><br><br><span class="hljs-comment">// 2.Object.seal():</span><br><span class="hljs-keyword">var</span> obj2 = &#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;dadudu&quot;</span>,<br>    <span class="hljs-attr">width</span>:<span class="hljs-string">&quot;200&quot;</span>,<br>    <span class="hljs-attr">height</span>:<span class="hljs-string">&quot;300&quot;</span><br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj2);<br><span class="hljs-keyword">delete</span> obj2.<span class="hljs-property">width</span>;<span class="hljs-comment">//删除一个旧属性</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj2);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">isSealed</span>(obj2));<br><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">seal</span>(obj2)<span class="hljs-comment">//阻止添加新属性 和删除旧属性</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">isSealed</span>(obj2));<br><span class="hljs-keyword">delete</span> obj2.<span class="hljs-property">height</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj2);<br><br><br><span class="hljs-comment">// 3.Object.freeze()</span><br><span class="hljs-keyword">var</span> obj3 = &#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;xiaowangba&quot;</span>,<br>    <span class="hljs-attr">width</span>:<span class="hljs-string">&quot;200&quot;</span>,<br>    <span class="hljs-attr">height</span>:<span class="hljs-string">&quot;300&quot;</span><br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj3);<br>obj3.<span class="hljs-property">width</span> = <span class="hljs-string">&quot;1000&quot;</span>;<span class="hljs-comment">//修改旧属性</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj3);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">isFrozen</span>(obj3));<br><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">freeze</span>(obj3);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">isFrozen</span>(obj3));<br>obj3.<span class="hljs-property">height</span> = <span class="hljs-string">&quot;800&quot;</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj3);<br></code></pre></td></tr></table></figure>





<h3 id="对象的遍历"><a href="#对象的遍历" class="headerlink" title="对象的遍历"></a>对象的遍历</h3><ul>
<li><code>for in </code>循环 专门用来遍历对象</li>
<li>for in中定义的变量 代表着 对象的键名</li>
</ul>
<h3 id="基本类型和引用类型"><a href="#基本类型和引用类型" class="headerlink" title="基本类型和引用类型"></a>基本类型和引用类型</h3><ul>
<li>数据类型中 分为5种简单的数据类型和1种复杂的数据类型，他们分别对应着基本类型值和引用类型值</li>
<li>基本类型值：null undefined string number boolean</li>
<li>引用类型值：object（正则、数组、对象、函数。。。。。）</li>
<li>什么这么分类：是按照这两种值存储的方式不同来分类的</li>
</ul>
<h5 id="基本类型值"><a href="#基本类型值" class="headerlink" title="基本类型值"></a>基本类型值</h5><ul>
<li>基本类型值：null undefined string number boolean</li>
<li>基本类型值都是按值访问 直接操作保存在变量中的实际值</li>
<li>基本类型值都是存储在栈区中，我们可以直接通过变量名访问实际值</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> num1 = <span class="hljs-number">10</span>;<span class="hljs-comment">//在栈区开启一个空间  栈区的名是变量名  栈区的值是 这个变量所对应的的值</span><br><span class="hljs-keyword">var</span> num2 = num1; <span class="hljs-comment">//重新开辟一个区域保存num2的值，获取num1的值 并赋值给num2</span><br>num1 = <span class="hljs-number">30</span>;<span class="hljs-comment">//改变栈区num1的值为30   但是不会影响num2</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num1,num2);<span class="hljs-comment">//30 10</span><br></code></pre></td></tr></table></figure>

<ul>
<li>基本类型值的特点：<ol>
<li>基本类型的值是不可变的</li>
<li>我们不能给基本类型值添加属性和方法 就算添加也是获取不到的</li>
<li>基本类型的比较是值的比较</li>
<li>基本类型的变量是存放在栈区的（栈区指内存里的栈内存),栈区包括了变量的标识符和变量的值</li>
</ol>
</li>
</ul>
<h5 id="引用类型值"><a href="#引用类型值" class="headerlink" title="引用类型值"></a>引用类型值</h5><ul>
<li>引用类型值再栈区储存的是 标识符（变量名）和引用地址 在堆区储存的是对象的值</li>
<li>当我们访问某一个对象的时候，要先访问到栈区的地址 然后引用到堆区的值</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> obj1 = &#123;<br>    <span class="hljs-attr">name</span>:<span class="hljs-string">&quot;lily&quot;</span><br>&#125;<span class="hljs-comment">//声明一个对象，然后值保存在堆区  变量和引用地址保存在栈区</span><br><span class="hljs-keyword">var</span> obj2 = obj1;<span class="hljs-comment">//赋值都是 栈区引用地址的赋值  把obj1的地址赋值给了obj2</span><br>obj1.<span class="hljs-property">name</span> = <span class="hljs-string">&quot;lucy&quot;</span>;<span class="hljs-comment">//改变了obj1 堆区对象值的内容</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj1,obj2);<span class="hljs-comment">//obj1 和obj2 引用地址是一样的 所以指向的是同一个对象</span><br></code></pre></td></tr></table></figure>

<ul>
<li>引用类型值特点：<ol>
<li>引用类型的值是可变的，我们可以为引用类型添加属性和方法</li>
<li>引用类型的值是同时保存在栈内存和堆内存中的对象</li>
<li>引用类型的比较是引用的比较</li>
</ol>
</li>
</ul>
<h2 id="Js数组"><a href="#Js数组" class="headerlink" title="Js数组"></a>Js数组</h2><h3 id="构造数组"><a href="#构造数组" class="headerlink" title="构造数组"></a>构造数组</h3><ul>
<li>使用new运算符调用Array()类型函数时,可以构造一个新数组</li>
<li>直接调用Array函数,不传递参数,可以创建一个空数组</li>
<li>传递多个值，可以创建一个实数组</li>
<li>传递一个数值参数,可以定义数组的长度,即包含元素的个数，参数值等于数组的length属性值,每个元素的值默认值为 undefined</li>
<li>使用中括号可以读写数组，中括号左侧是数组名称，中括号内为数组下标</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 1.构造数组：</span><br><span class="hljs-keyword">var</span> arr1 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Array</span>();<span class="hljs-comment">//如果不传值，则构造一个空数组</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr1);<br><br><span class="hljs-keyword">var</span> arr2 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Array</span>(<span class="hljs-string">&quot;a&quot;</span>,<span class="hljs-string">&quot;b&quot;</span>,<span class="hljs-number">23</span>,<span class="hljs-number">45</span>);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr2);<br><br><span class="hljs-keyword">var</span> arr3 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Array</span>(<span class="hljs-number">4</span>);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr3);<span class="hljs-comment">//如果传递一个参数，是定义数组的长度</span><br><br><span class="hljs-keyword">var</span> arr4 = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Array</span>(<span class="hljs-string">&quot;a&quot;</span>);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr4);<br><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr2[<span class="hljs-number">2</span>]);<span class="hljs-comment">//读取数组的值</span><br></code></pre></td></tr></table></figure>





<h4 id="空位数组"><a href="#空位数组" class="headerlink" title="空位数组"></a>空位数组</h4><ul>
<li>空位数组就是数组中包含空元素。所谓空元素,就是在语法上数组中两个逗号之间没有任何值。出现空位数组的情况如下<ul>
<li>直接量定义</li>
<li>构造函数定义</li>
<li>delete删除</li>
</ul>
</li>
<li>空元素可以读写, length属性不排斥空位,如果使用for语句和 length属性遍历数组,空元素都可以 被读取,空元素返回值为undefined</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr10 = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,,<span class="hljs-number">4</span>];<span class="hljs-comment">//空位数组，找不到，所以空位的值返回undefined</span><br><span class="hljs-keyword">var</span> arr11 = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-literal">undefined</span>,<span class="hljs-number">4</span>];<span class="hljs-comment">//有值，值为undefined</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr10);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr11);<br></code></pre></td></tr></table></figure>



<h4 id="关联数组"><a href="#关联数组" class="headerlink" title="关联数组"></a>关联数组</h4><ul>
<li>如果数组的下标值超出范围,如负数、浮点数、布尔值、对象或其他值，js会自动把它转换为一个字符串,并定义为关联数组。</li>
<li>关联数组就是与数组关联的对象,简单地说就是数组对象,字符串下标就是数组对象的属性</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr12 = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>];<br>arr12[<span class="hljs-number">3.1</span>] = <span class="hljs-string">&quot;haha&quot;</span>;<span class="hljs-comment">//相当于给数组扩展了一些属性和方法</span><br>arr12[<span class="hljs-literal">true</span>] = <span class="hljs-string">&quot;buer&quot;</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr12);<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr12[<span class="hljs-number">3.1</span>]);<br></code></pre></td></tr></table></figure>



<h4 id="伪类数组"><a href="#伪类数组" class="headerlink" title="伪类数组"></a>伪类数组</h4><ul>
<li>伪类数组,也称为类数组,即类似数组结构的对象。</li>
<li>简单地说,就是对象的属性名为非负整数,且从0开始,有序递增,同时包含length属性,还应确保其值与有序下标属性个数保持动态一致,以方便对伪类数组进行选代操作。</li>
<li>由于数字数非法标识符，所以需要用中括号来读写属性</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> obj1 = &#123;<br>  <span class="hljs-number">0</span>:<span class="hljs-string">&quot;a&quot;</span>,<br>  <span class="hljs-number">1</span>:<span class="hljs-string">&quot;2&quot;</span>,<br>  <span class="hljs-number">2</span>:<span class="hljs-string">&quot;c&quot;</span>,<br>  <span class="hljs-number">3</span>:<span class="hljs-string">&quot;d&quot;</span>,<br>  <span class="hljs-attr">length</span>:<span class="hljs-number">4</span><br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj1[<span class="hljs-number">1</span>]);<br></code></pre></td></tr></table></figure>



<h4 id="斐波那契数列"><a href="#斐波那契数列" class="headerlink" title="斐波那契数列"></a>斐波那契数列</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//打印出斐波那契数列的前100个值 在数组中</span><br><span class="hljs-comment">// 1,2,3,5,8,13 初始值1和2   其他的值是前两个值的和</span><br><span class="hljs-comment">// arr[6] = arr[4]+arr[5]</span><br><span class="hljs-keyword">var</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>];<br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i = <span class="hljs-number">2</span>; i &lt; <span class="hljs-number">100</span>; i++) &#123;<br>    arr[i] = arr[i-<span class="hljs-number">2</span>] + arr[i-<span class="hljs-number">1</span>];<br>&#125;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr);<br></code></pre></td></tr></table></figure>



<h3 id="数组的长度"><a href="#数组的长度" class="headerlink" title="数组的长度"></a>数组的长度</h3><ul>
<li>每个数组都有一个length属性，该属性返回数组的最大长度。</li>
<li>length属性可读可写，是一个动态属性。</li>
<li>length属性值也会随数组元素的变化而自动更新。同时如果重置了length属性值，也将影响数组的元素。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> arr1 = [];<br>arr1.<span class="hljs-property">length</span> = <span class="hljs-number">100</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr1);<span class="hljs-comment">//empty*100</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr1[<span class="hljs-number">10</span>]);<span class="hljs-comment">//undefined</span><br><br><span class="hljs-keyword">var</span> arr2 = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>];<br>arr2.<span class="hljs-property">length</span> = <span class="hljs-number">5</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr2);<br><br><span class="hljs-keyword">var</span> arr3 = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>,<span class="hljs-number">5</span>,<span class="hljs-number">6</span>,<span class="hljs-number">7</span>];<br>arr3.<span class="hljs-property">length</span> = <span class="hljs-number">2</span>;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr3);<span class="hljs-comment">//[1,2]</span><br></code></pre></td></tr></table></figure>





<h3 id="操作数组"><a href="#操作数组" class="headerlink" title="操作数组"></a>操作数组</h3><h4 id="栈操作"><a href="#栈操作" class="headerlink" title="栈操作"></a>栈操作</h4><ul>
<li>使用push()和pop()方法,可以在数组的尾部执行操作。</li>
<li>其中push方法，能够把一个或多个参数附加到数组的尾部，并返回附加元素以后，数组的长度</li>
<li>pop方法是能够删除数组中的最后一个元素，并返回删除的值</li>
</ul>
<h4 id="队列操作"><a href="#队列操作" class="headerlink" title="队列操作"></a>队列操作</h4><ul>
<li>使用unshift()和 shift()方法可以在数组头部执行操作</li>
<li>其中unshift()能够把一个或多个参数值附加到数组的头部,第1个参数为数组新的元素0,第2个参数为新的元素1,以此类推,最后返回添加元素后的数组长度</li>
<li>shift方法能够删除数组第1s个元素,并返回该元素,然后将余下所有元素前移1位,以填补数组头部的空缺。如果数组为空, shift将不进行任何操作,返回 undefined</li>
<li>使用 unshift分批插入元素与一次性插入元素结果是不同的</li>
<li>将pop()与 unshift()方法结合,或者将 push()与 shift()方法结合使用,可以模拟队列</li>
</ul>
<h4 id="删除元素"><a href="#删除元素" class="headerlink" title="删除元素"></a>删除元素</h4><ul>
<li>使用pop方法可以删除尾部的元素,使用shift方法可以删除头部的元素</li>
<li>使用delete运算符能删除指定下标位置的数组元素,删除后的元素为空位元素,删除数组length保持不变</li>
<li>使用length属性可以删除尾部一个或多个元素,甚至可以清空整个数组</li>
<li>使用splice方法可以删除指定下标位置后一个或多个数组元素（个数）</li>
</ul>
<h4 id="添加元素"><a href="#添加元素" class="headerlink" title="添加元素"></a>添加元素</h4><ul>
<li>使用 push方法可以在尾部添加一个或多个元素,使用 unshift方法可以在头部附加一个或多个元素</li>
<li>通过中括号和下标值,可以为数组指定下标位置添加新元法来添加元素</li>
<li>concat方法能够把传递的所有参数按顺序添加到数组的尾部<ul>
<li>concat方法可以跟随多个参数,并把它们作为元素按顺序连接到数组的尾部</li>
<li>如果参数是数组,则concat方法会把它打散,分别作为单独的元素连接到数组的尾部</li>
<li>不过concat方法仅能够打散一维数组,它不会打散二维的数组。</li>
<li>concat方法将创建并返回一个新数组,而不是在原来数组基础上添加新元素。所以,如果要在原数组着础上添加元素,建议使用 push方法和unshift方法来实现。但是 push方法和 unshift方法不能够打散参数数组，而是把它作为单独的参数执行添加操作</li>
</ul>
</li>
<li>使用 splice方法在指定下标位置后添加一个或多个元素</li>
</ul>

                
              </div>
            
            <hr/>
            <div>
              <div class="post-metas my-3">
  
  
</div>


              
  

  <div class="license-box my-3">
    <div class="license-title">
      <div>前端基础三大件的学习</div>
      <div>https://deng-zixiong.gitee.io/dzx-blog/2021/09/07/前端基础三大件/</div>
    </div>
    <div class="license-meta">
      
        <div class="license-meta-item">
          <div>作者</div>
          <div>John Doe</div>
        </div>
      
      
        <div class="license-meta-item license-meta-date">
          <div>发布于</div>
          <div>2021年9月7日</div>
        </div>
      
      
      
        <div class="license-meta-item">
          <div>许可协议</div>
          <div>
            
              
              
                <a target="_blank" href="https://creativecommons.org/licenses/by/4.0/">
                  <span class="hint--top hint--rounded" aria-label="BY - 署名">
                    <i class="iconfont icon-by"></i>
                  </span>
                </a>
              
            
          </div>
        </div>
      
    </div>
    <div class="license-icon iconfont"></div>
  </div>



              
                <div class="post-prevnext my-3">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/dzx-blog/2021/10/01/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91/" title="移动端开发">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">移动端开发</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>

    <div class="side-col d-none d-lg-block col-lg-2">
      
  <aside class="sidebar" style="margin-left: -1rem">
    <div id="toc">
  <p class="toc-header">
    <i class="iconfont icon-list"></i>
    <span>目录</span>
  </p>
  <div class="toc-body" id="toc-body"></div>
</div>



  </aside>


    </div>
  </div>
</div>





  



  



  



  



  







    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v" for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>

    

    
  </main>

  <footer>
    <div class="footer-inner">
  
    <div class="footer-content">
       <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
    </div>
  
  
  
  
</div>

  </footer>

  <!-- Scripts -->
  
  <script  src="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://lib.baomitu.com/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js" ></script>
<script  src="https://lib.baomitu.com/twitter-bootstrap/4.6.1/js/bootstrap.min.js" ></script>
<script  src="/dzx-blog/js/events.js" ></script>
<script  src="/dzx-blog/js/plugins.js" ></script>


  <script  src="https://lib.baomitu.com/typed.js/2.0.12/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var subtitle = document.getElementById('subtitle');
      if (!subtitle || !typing) {
        return;
      }
      var text = subtitle.getAttribute('data-typed-text');
      
        typing(text);
      
    })(window, document);
  </script>




  
    <script  src="/dzx-blog/js/img-lazyload.js" ></script>
  




  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/tocbot/4.18.2/tocbot.min.js', function() {
    var toc = jQuery('#toc');
    if (toc.length === 0 || !window.tocbot) { return; }
    var boardCtn = jQuery('#board-ctn');
    var boardTop = boardCtn.offset().top;

    window.tocbot.init(Object.assign({
      tocSelector     : '#toc-body',
      contentSelector : '.markdown-body',
      linkClass       : 'tocbot-link',
      activeLinkClass : 'tocbot-active-link',
      listClass       : 'tocbot-list',
      isCollapsedClass: 'tocbot-is-collapsed',
      collapsibleClass: 'tocbot-is-collapsible',
      scrollSmooth    : true,
      includeTitleTags: true,
      headingsOffset  : -boardTop,
    }, CONFIG.toc));
    if (toc.find('.toc-list-item').length > 0) {
      toc.css('visibility', 'visible');
    }

    Fluid.events.registerRefreshCallback(function() {
      if ('tocbot' in window) {
        tocbot.refresh();
        var toc = jQuery('#toc');
        if (toc.length === 0 || !tocbot) {
          return;
        }
        if (toc.find('.toc-list-item').length > 0) {
          toc.css('visibility', 'visible');
        }
      }
    });
  });
</script>


  <script src=https://lib.baomitu.com/clipboard.js/2.0.11/clipboard.min.js></script>

  <script>Fluid.plugins.codeWidget();</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/anchor-js/4.3.1/anchor.min.js', function() {
    window.anchors.options = {
      placement: CONFIG.anchorjs.placement,
      visible  : CONFIG.anchorjs.visible
    };
    if (CONFIG.anchorjs.icon) {
      window.anchors.options.icon = CONFIG.anchorjs.icon;
    }
    var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
    var res = [];
    for (var item of el) {
      res.push('.markdown-body > ' + item.trim());
    }
    if (CONFIG.anchorjs.placement === 'left') {
      window.anchors.options.class = 'anchorjs-link-left';
    }
    window.anchors.add(res.join(', '));

    Fluid.events.registerRefreshCallback(function() {
      if ('anchors' in window) {
        anchors.removeAll();
        var el = (CONFIG.anchorjs.element || 'h1,h2,h3,h4,h5,h6').split(',');
        var res = [];
        for (var item of el) {
          res.push('.markdown-body > ' + item.trim());
        }
        if (CONFIG.anchorjs.placement === 'left') {
          anchors.options.class = 'anchorjs-link-left';
        }
        anchors.add(res.join(', '));
      }
    });
  });
</script>


  
<script>
  Fluid.utils.createScript('https://lib.baomitu.com/fancybox/3.5.7/jquery.fancybox.min.js', function() {
    Fluid.plugins.fancyBox();
  });
</script>


  <script>Fluid.plugins.imageCaption();</script>

  <script  src="/dzx-blog/js/local-search.js" ></script>





<!-- 主题的启动项，将它保持在最底部 -->
<!-- the boot of the theme, keep it at the bottom -->
<script  src="/dzx-blog/js/boot.js" ></script>


  

  <noscript>
    <div class="noscript-warning">博客在允许 JavaScript 运行的环境下浏览效果更佳</div>
  </noscript>
</body>
</html>
